39

Tenho o seguinte código HTML e CSS:

#element    p{color:blue;}
.element    p{color:red;}
div         p{color:pink;}
div.element p{color:yellow;}
div[name="element"] p{color:purple;}
div p:first-child{color:brown;}
div p:nth-child(1){color:white;}
<div class="element" id="element" name="element">
     <p>Elemento</p>
</div>

Sei que já há uma pergunta relacionada, mas nesse caso estou tratando com uma série de seletores, e não somente classe e id.

  • Porque é aplicado o estilo do seletor id ?
  • Porque o id tem prioridade em cima dos outros tantos seletores, já que os demais vem depois dele ?
  • Na última linha de estilo eu tenho um caminho com 3 seletores e mesmo assim o id tem prioridade, porquê ?
5
  • 1
    Fiquei encucado por que div p não deu ficou pink. Mas boa parte dessa questão tem respondida aqui Qual a prioridade do HTML? “id” ou “class”?.
    – user49127
    Commented 1/08/2016 às 17:50
  • Eu entendo sobre as precedências, porém na teoria o caminho mais específico deveria ganhar. Commented 1/08/2016 às 18:13
  • #element p é mais específico do que uma div qualquer seguida de p, por isso prevalece o blue ao pink.
    – Largato
    Commented 1/08/2016 às 19:16
  • Concordo com você @Bacco, mas nos demais tenho até 3 seletores isso não seria mais específico ? Commented 1/08/2016 às 19:26
  • 1
    @RicardoMota acrescentei explicações na resposta, e uma ferramenta que você talvez vá achar interessante :)
    – Largato
    Commented 1/08/2016 às 19:49

1 Resposta 1

54
+50

Basicamente, a regra seguida é a da "especificidade":

https://www.w3.org/TR/css3-selectors/#specificity


A especificidade é calculada da seguinte forma:

  • O seletor universal * é ignorado.
  • a = número de IDs em cada seletor;
  • b = número de seletores de classes, atributos e pseudoclasses;
  • c = número de seletores de tipo e pseudoelementos;
  • estilos inline (style="") tem mais prioridade que as 3 condições acima.

Usando os valores a-b-c você obtém o índice de classificação (vale o maior):

  ┌── maior especificidade   
┌─┴─┐
1-0-3 > 0-14-5 > 0-2-1 > 0-0-12 
                         └─┬──┘
    menor especificidade ──┘

Quando os índices forem iguais, prevalece o último definido no CSS, respeitando a "cascata".

Exemplos:

*               /* a=0 b=0 c=0 -> especificidade =       0 */
LI              /* a=0 b=0 c=1 -> especificidade =       1 */
UL LI           /* a=0 b=0 c=2 -> especificidade =       2 */
UL OL+LI        /* a=0 b=0 c=3 -> especificidade =       3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> especificidade =     1-1 */
UL OL LI.red    /* a=0 b=1 c=3 -> especificidade =     1-3 */
LI.red.level    /* a=0 b=2 c=1 -> especificidade =     2-1 */
#x34y           /* a=1 b=0 c=0 -> especificidade =   1-0-0 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> especificidade =   1-0-1 */
style="..."     /* a=0 b=0 c=0 -> especificidade = 1-0-0-0 */

Notas:

  • Se ocorrer repetição do mesmo seletor simples, a especificidade também aumenta (cada ocorrência é contabilizada).
  • a declaração dentro de style="" é considerada como 1-0-0-0 para fins de cálculo, sendo mais específica que o CSS do id do elemento, por exemplo.
  • usar !important após uma definição tem prioridade sobre todas as outras declarações (caso tenha mais de um !important, o critério de desempate segue as regras já mencionadas)
  • se o !important for aplicado num atalho como background:, vale como se tivesse sido aplicado em todos os sub-ítens do atalho (background-color, background-position etc)

Aplicado ao seu caso:

#element    p{color:blue;}                /* 1-0-1 */
.element    p{color:red;}                 /*   1-1 */
div         p{color:pink;}                /*     2 */
div.element p{color:yellow;}              /*   1-2 */
div[name="element"] p{color:purple;}      /*   1-2 */
div p:first-child{color:brown;}           /*   1-2 */
div p:nth-child(1){color:white;}          /*   1-2 */

Ferramenta para cálculo online:

http://specificity.keegan.st/

Veja também:

Qual a prioridade do HTML? "id" ou "class"?

4
  • Agora ficou claro Bacco. Muito obrigado. Commented 1/08/2016 às 19:50
  • Não sabia que era feito um calculo. Muito bom saber disso. Commented 1/08/2016 às 19:50
  • 1
    Meus parabéns, uma das melhores explicações que li :D +1
    – Syzoth
    Commented 1/08/2016 às 20:38
  • 1
    +1 Muito bem explicado!
    – DiChrist
    Commented 25/11/2016 às 10:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .