Skip to main content
4 de 6
replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/

Qual seletor css tem prioridade

Minha dúvida é bem objetiva.
Tratando-se de seletores css.
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ê ?

Ricardo Mota
  • 2,9mil
  • 11
  • 21