Essa aula vai ser muito importante para entender como funciona a hierarquia de comandos do CSS relacionada a herança e especificidade.

Quando criamos os nossos códigos HTML, sempre usamos um elemento dentro de outro. Quando criamos por exemplo um parágrafo (<p>) no mínimo ele está dentro do elemento body.

Herança

Levando em conta que o HTML sempre trabalha com o conceito de elemento pai, ou seja um elemento contém outros elementos, o CSS tem uma forma de funcionar chamada de herança.

Quando criamos um elemento <h2> dentro de uma <div> podemos por exemplo atribuir uma cor de texto para a div, e consequentemente o h2 que está dentro da div vai receber também esse valor de cor de texto, pois o h2 herda características do seu elemento pai, nesse caso o elemento pai é a div.

A herança é forma de os elementos filhos receberem características CSS de seu elemento pai.

Especificidade

Você já deve saber que existem diversas formas de usar seletores CSS para aplicar mudanças na aparência de um elemento. Se tivermos por exemplo:

<h2 class=”subtitle” id=”main” style=”color: black”>Este é um título qualquer</h2>

Nesse elemento acima podemos aplicar CSS com diversas formas: Através da classe “subtitle”, da id “main”, pelo seletor de tipo h2 e até mesmo pelo CSS inline.

Mas imagine a seguinte hipótese: Por algum motivo, existe no CSS comandos diferentes de cor de texto para o mesmo h2:

Qual cor vai funcionar?

E agora, qual será a cor de texto desse h2? O CSS tem uma forma de priorizar os comandos quando existe um conflito de valores. Quanto mais específico for o seletor, mais prioridade tem para o CSS.

Nesse caso acima a cor do texto seria “black”. Pois dentre as 4 possibilidades, o CSS inline é considerado o mais específico possível na escala de prioridade.

A segunda maior prioridade do CSS é quanto ao id. Se nesse caso não existisse o CSS inline, o valor a ser aplicado seria o “green” no qual o id utilizou. O CSS aplicado no id tem mais prioridade que o CSS aplicado na class ou no elemento (nesse caso h2).

Caso não existisse o id, apenas o class e o “h2” o valor da cor de texto a ser aplicado seria o valor em class “.subtitle” pois o seletor de tipo “h2” é o mais genérico possível, sendo o class mais específico, pois se refere a um grupo de elementos chamado “subtitle”.

Agora que já entendemos como funciona a herança e especificidade no CSS, vamos continuar evoluindo!