Como saber qual regra CSS tem prioridade

Muitas vezes, principalmente quando se está trabalhando com um arquivo CSS com muitas regras, a quantidade de estilos para tags, identificadores e classes fazem com que algumas regras sobreponham outras sem que você entenda o porquê.

Se você define uma cor de link (tag <a>) em um #id, outra em uma .classe e outra usando a regra #id .classe a. Você sabe qual a regra que vai valer para cada caso? Embora muitos desenvolvedores façam por puro instinto, existe um padrão para isso.

Entenda como calcular

Para saber quão especí­fica é uma regra CSS faremos um calculo muito simples, via CSS Mastery, baseado em quatro critérios (a b c d), sendo atribuido um valor a cada um de 0 a 10 de acordo com a quantidade de elementos.

O peso de cada elemento é definido da seguinte forma: a*1000, b*100, c*10 e d*1. Conheça os critérios:

• a = 1 se tiver elemento inline Style=”” e a = 0 se não tiver.
• b = número total de seletores em #id
• c = número total de seletores em .classes, pseudo-classes e atributos
• d = número de seletores por elemento (tags como a, em, strong, p, div)

Veja um exemplo comparativo

#corpo .conteudo p { color: #FFF; }
div#corpo { color: #09C; }

Este é um CSS com duas regras. Seguindo o conceito acima, no primeiro caso o #corpo .conteudo. p terá o valor 0111 e no segundo caso o div#corpo valerá 0101. E como 0111 é maior que 0101, se algum elemento for atingido pelas duas regras, é a #corpo .conteudo p que definirá seu estilo.

Resumindo

• Uma regra escrita no atributo Style sempre sobreescreverá qualquer outra regra.
• Uma regra dentro de um #id será sempre mais forte que uma fora de um #id.
• Uma regra de .classe será sempre mais especí­fica que uma regra somente de seletores de tag (em, p, div, etc..)
• E por último, se duas regras tiverem a mesma força, a que for declarada por último é a que valerá.

Isso tudo pode parecer um pouco confuso de iní­cio, mas é tudo o que se precisa saber para entender a força de cada regra do CSS sobre elementos do HTML. Vai acabar com os misticismo por cima do tema e seus instintos serão substituí­dos por conceitos mais sólidos do funcionamento da sintaxe do CSS.