Este artigo vem um pouco no seguimento de um outro sobre os Selectores no CSS porque foi quando estava a escrever esse artigo que comecei a pensar neste tema da hierarquia no CSS.
Bem... a infopédia diz-nos o seguinte sobre a hierarquia:
nome feminino
- distribuição ordenada de poderes civis, militares ou eclesiásticos
- classificação ordenada, dentro de qualquer grupo ou corporação, geralmente de acordo com o poder, autoridade ou função
- relação de serviço em que o superior tem o poder de direção, e o subalterno o dever de obediência
- classificação por ordem crescente ou decrescente; escala
hierarquia eclesiástica
o conjunto das pessoas que na Igreja detêm o poder de ordem ou de jurisdição, subordinadas umas às outras, sob a chefia suprema do papaEtimologia: Do grego hierarkhía, «dignidade de grão-sacerdote»
Numa página dum website ou blogue, a parte que diz aos navegadores como todos os elementos se vão apresentar ao leitor é o CSS.
E num blogue temos esse CSS presente no HTML de três (3) maneiras:
<link href="url-dos-estilos-do-blogue.css" rel="stylesheet" />
<b:skin> /*ESTILOS CSS DO BLOGUE */
<![CDATA[
.elemento {
color: #fff;
}
]]>
</b:skin>
<b:template-skin> /*ESTILOS CSS DO PAINEL DO BLOGUE */
<![CDATA[
.elemento {
margin: 3px 5px;
}
]]>
</b:template-skin>
<style>
.elemento {
font-family: sans-serif;
}
</style>
<p style="color: #0b4;">Este paragrafo vai estar escrito a verde</p>
Este parágrafo vai estar escrito a verde
Agora que já estabelecemos COMO o CSS pode estar presente num blogue, vamos ver a ordem em que os navegadores vão "ler" esses estilos no HTML.
E primeiro uma coisa a ter em atenção, o navegador "lê" de cima para baixo.
Por isso, quando existem múltiplos estilos atribuidos ao mesmo elemento poderá haver conflitos que pode originar situações anómalas e esse elemento não se apresentar como desejamos ao leitor.
Então a ordem de leitura destes estilos, quando em simultâneo no HTML, é a mesma em que apresentei acima.
Tal como o significado da sigla CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata), estes estilos funcionam em cascata com a ordem acima descrita, sendo que a última regra da cascata é a que tem prioridade.
A ordem de prioridade é a seguinte:
Quer isto dizer que em caso de regras iguais com valores diferentes numa mesma página do blogue, o CSS Inline sobrepõe-se ao CSS Interno e este ao CSS Externo.
Outra coisa importante é que mesmo quando existem duas declarações iguais no mesmo CSS, a última regra da lista das declarações é a que prevalece.
E como mencionei antes, é também importante a posição dos diferentes CSS na <head> do HTML, a última folha CSS na ordem descendente do HTML é a que será representada em caso de conflito.
Agora dento dos próprios estilos, a hierarquia CSS determina qual o estilo que será aplicado quando há regras conflitantes, seguindo uma determinada ordem.
Essa ordem será do mais prioritário para o menos prioritário, e é a seguinte:
.elemento {
color: red !important;
}
<h1 style="font-size: 22px;">O texto aqui tem um tamanho de 22px.</h1>
<div id="exemplo"> Viva o <b>Sporting!</b> </div>
#exemplo {
margin: 15px;
}
#exemplo b {
color: #8f8;
font-size: 22px;
}
Depois da prioridade pela Importância, temos a prioridade pela Especificidade, que é medida baseado em quão específico é um selector, ou seja, quantos elementos ele pode combinar/atingir.
Existe uma pontuação entre os vários tipos de selector que é usada para especificar a especificidade do mesmo, e que vai determinar qual o estilo a ser aplicado quando há conflito entre as regras.
A pontuação para o cálculo da especificidade é representada por quatro números conforme a importância dos selectores na seguinte ordem: #id, .class, selectores de elementos e selectores universais.
Para fazer esse cálculo, essa pontuação funciona da seguinte maneira:
Talvez a seguinte tabela ajude a perceber melhor...
| Inline | ID | Classe | Elemento | Especificidade | |
|---|---|---|---|---|---|
| <p style ...> | 1 | 0 | 0 | 0 | 1000 |
| h1, h2 | 0 | 0 | 2 | 2 | |
| h1.classe | 0 | 0 | 1 | 1 | 11 |
| #UmaID | 0 | 1 | 0 | 0 | 100 |
| #UmaID h2 | 0 | 1 | 0 | 1 | 101 |
| #UmaID #outraID p | 0 | 2 | 0 | 1 | 201 |
| h1 p | 0 | 0 | 0 | 2 | 2 |
| .outraclasse | 0 | 0 | 1 | 0 | 10 |
Quando existe um conflito nas declarações, é utilizada a especificidade.
A cada selector é atribuído um valor, o número mais alto é usado para determinar o resultado final a apresentar ao visitante.
Caso tenhas curiosidade, podes saber mais em Specificity (existe uma versão em português deste artigo, mas preferi linkar a original porque essa contém todos os elementos necessários para uma melhor compreensão do assunto), ou em Pontuação, Hierarquia e Sequência dos Seletores CSS.
Resumindo o assunto duma forma mais simples de perceber: quanto mais específico for um selector, maior será a sua prioridade, mas vamos a um exemplo prático:
<div id="exemplopratico"> <p class="exemplodeclasse">Texto dentro duma class, que está dentro duma ID <span>com mais este texto dentro dum elemento simples (<b>span</b>) sem qualquer atributo</span>, e também <i style="color:red">um pequeno texto dentro doutro elemento que deverá ser em itálico com cor vermelha</i>.</p> <p class="exemplodeclasse2">Texto dentro duma segunda class, que deveria ser branco tal como na irmã mas que é verde porque na declaração da cor tem <b>!important</b>, anulando a declaração da <b>#exemplopratico</b>.</p> </div>
#exemplopratico p {
margin: 2px;
padding: 3px 5px;
color: white; /* cor branco */
}
#exemplopratico p:before {
content: "Texto inserido utilizando o pseudo-elemento before";
margin: 0 3px;
}
.exemplodeclasse i {
color: skyblue; /* cor azul claro */
}
.exemplodeclasse {
color: blue; /* cor azul */
}
div p {
color: grey; /* cor cinzento */
}
p {
color: orange; /* cor laranja */
}
.exemplodeclasse2 {
color: lime!important; /* cor verde */
}
Texto dentro duma class, que está dentro duma ID com mais este texto dentro dum elemento simples (span) sem qualquer atributo, e também um pequeno texto dentro doutro elemento que deverá ser em itálico com cor vermelha.
Texto dentro duma segunda class, que deveria ser branco tal como na irmã mas que é verde porque na declaração da cor tem !important, anulando a declaração da #exemplopratico.
Então no exemplo acima temos uma div com ID (#exemplopratico), que contém um parágrafo (p) com um pseudo-elemento (:before), contendo uma span simples e um elemento (i) com o estilo CSS dentro do atributo style.
Em comum, a declaração que diz qual a cor a apresentar no texto.
Como podem ver no pseudo-elemento (:before), a cor é branca como resto do texto tal como está estipulada nas declarações de #exemplopratico p e não no elemento "pai", que seria .exemplodeclasse é tem declarado a cor azul.
Isso acontece porque o selector mais específico é #exemplopratico p, não importa a ordem em que os elementos estão declarados.
Se repararem na aba CSS da demonstração, podem verificar que ainda existem outras declarações ignoradas pela mesma razão... excepto a declaração dentro do elemento (i) com o atributo style que é vermelha embora esteja presente junto aos estilos CSS declarando outra cor, o azul-claro.
A última parte do texto na demonstração é verde, apesar de estar dentro dum parágrafo ao lado do outro dentro da div com ID (#exemplopratico) porque na declaração da cor contém !important, o que se sobrepõe aos restantes estilos.
Para terminar, na hierarquia no CSS vem em primeiro lugar a Importância, seguido da prioridade pela Especificidade, e por último, a Ordem em que as regras são declaradas.
Como devem ter reparado, mantive a coisa o mais simples possivel.
Mas caso tenha alguma questão, podes deixar a tua(s) dúvida(s) nos comentários.
E por hoje é tudo. ;)
Até Breve. :-F
Comentários
Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.
Mas antes de comentarem, leiam as minhas Regras dos Comentários.
Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.
Caso prefiras comentar numa nova janela, ou se o formulário abaixo estiver nos dias ruins, podes clicar aqui.
Enviar um comentário