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.

Gostou do artigo? Siga-me no Twitter @richardbarros

2 comentá em “Como saber qual regra CSS tem prioridade

  1. Ivan 20/05/2009 10:30

    Não sei se é só isso, estou começando agora mas valeu!!

    show de bola!

    []’s

    Responder

  2. Daniel 13/06/2013 16:47

    Legal não conhecia essa regra do 1, 10, 100, 1000 agora ficou mais fácil.

    Valeu.

    Responder

Faça um comentário

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>