Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] A estilização do elemento pai sobrepõe a do elemento filho?

Referente ao curso JavaScript: construindo páginas dinâmicas, no capítulo Construindo a página e atividade Estilos CSS

por Mateus Vieira Cardoso
| 177.7k xp | 14 posts
Estagiário

Quando usamos o HTML

    <main>
        <img src="./img/bag.png" alt="sacola de compras">
        <form action="">
            <input type="text" placeholder="Digite o item que deseja adicionar">
            <button>Salvar item</button>
        </form>
        <h2>Lista de Compras</h2>
        <hr>
        <ul>
...

Junto com uma estilização direcionada a tag h2, parece que a propriedade text-align que foi atribuída na estilização da tag main se sobressai a que foi atribuída na estilização da tag h2, quando movemos o elemento h2 para dentro da tag ul, o elemento pai de h2 passa a ser o ul, que nesse momento não tem nenhuma estilização própria, e a propriedade text-align da estilização passa a funcionar corretamente.

Minha pergunta é, a estilização do elemento pai sempre vai ser priorizada em relação a estilização do elemento filho?

1 resposta
solução!
por Victor Costa Santos
| 1908.5k xp | 3661 posts
Alura Scuba Team Monitor de ForumOps

Oi Mateus!

A estilização do elemento pai pode influenciar os elementos filhos, mas isso depende das propriedades CSS aplicadas. No seu caso, a propriedade text-align aplicada no main está sendo herdada pelos elementos filhos, como o h2, já que text-align é uma propriedade que se propaga para dentro dos elementos filhos, a menos que eles tenham um estilo específico que sobreponha essa regra.

Quando você moveu o h2 para dentro do ul, ele deixou de ser diretamente afetado pelo text-align do main, já que o ul não herda essa propriedade automaticamente. Por isso, o estilo aplicado diretamente ao h2 dentro do ul passou a prevalecer.

Se você quiser garantir que a estilização do filho tenha prioridade sobre a do pai, sem depender da estrutura do HTML, você pode tornar os seletores mais específicos ou definir o text-align diretamente no elemento filho, como no exemplo abaixo:

main {
    text-align: center;
}

h2 {
    text-align: left;
}

Se, em algum caso, for realmente necessário sobrepor uma regra, você pode utilizar o !important, mas com cuidado, pois isso pode complicar a manutenção do código:

h2 {
    text-align: left !important;
}

Ainda assim, evite usar !important sempre que possível, preferindo manter o CSS claro e fácil de manter com seletores adequados.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!