Tutorial Avançado de CSS: Especificidade

20 07 2008

image

Se você tem duas (ou mais) regras CSS conflitantes que se aplicam ao mesmo elemento, existem algumas regras básicas que o navegador segue para determinar qual é a mais específica e por isso a vencedora.

Isso pode não parecer importante, e na maioria dos casos você não vai encontrar conflito algum, mas à medida que seus arquivos CSS se tornam maiores e mais complexos, ou você passa a lidar com um número maior de arquivos, aumentam as chances de conflitos aparecerem.

Se os seletores são os mesmos o último sempre tem prioridade. Por exemplo, se você tem:

p { color: red; }
p { color: blue; }

Elementos p seriam coloridos de azul porque é a regra que vem por último.

De qualquer forma, você geralmente não vai ter seletores idênticos com declarações conflitantes (porque não faz muito sentido). Conflitos sempre aparecem, no entanto, quando você tem seletores aninhados. No exemplo seguinte:

div p { color: red; }
p { color: blue; }

Pode parecer que um elemento p dentro de uma div vai ser colorida de azul, já que a regra de colorir elementos p de azul vem por último, mas na verdade ele vai ser colorido de vermelho devido a especificade do primeiro seletor. Basicamente, quanto mais específico for um seletor maior prioridade ele vai ter quando aparecerem estilos conflitantes.

A especifidade real de um grupo de seletores aninhados precisa de alguns cálculos. Basicamente, você atribui a cada seletor de id (“#qualquercoisa”) um valor de 100, a cada seletor de classe (“.qualquercoisa”) um valor de 10 e a cada seletor HTML (“qualquercoisa”) um valor de 1. Aí você soma tudo e que rápido!, você tem o valor da especificidade.

  • p tem especifidade de 1 (1 seletor HTML)
  • div p tem especifidade de 2 (2 seletores HTML; 1+1)
  • .tree tem especifidade de 10 (1 seletor de classe)
  • div p.tree tem especifidade de 12 (2 seletores HTML e um seletor de classe; 1+1+10)
  • #obaoba tem especifidade de 100 (1 seletor de id)
  • body #content .alternative p tem especifidade de 112 (seletor HTML, seletor de id, seletor de classe, seletor HTML; 1+100+10+1)

Então de todos os exemplos usados, div p.tree (com especificidade de 10) venceria div p (com especificidade de 2) e body #content .alternative p venceria de todos eles, independente da ordem.

Páginas Relacionadas

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios

Ações

Information

2 responses

18 08 2008
Juarez P. A. Filho

Olá Elomar, muitas referências interessantes aqui no seu blog, parabéns. Assisti uma palestra no Café com o tom e você estava presente, depois dei uma passada no seu twitter e vi alguma coisa sobre um curso de Rails no
skype, mas o usuário que você informou lá não existe. =(
Poderia me enviar um e-mail com mais detalhes? E quem se interessar deixa um comentário também para o Elomar! =D

18 08 2008
Elomar França

Olá, Juarez

Obrigado!
Já te adicionei no skype.

Tá começando um grupo de estudos de Rails, pro pessoal que tá começando. Somos um bando de iniciantes, que pretende aprender por conta própria metendo a mão na massa, fazendo uma aplicação.

É uma iniciativa bem bacana, e que eu aposto que vai ter futuro. =D

A gente discute nessa lista: http://groups.google.com/group/aprendendo-rails/

(ps. Aliás, você já faz parte dele, não é?)

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: