from Tatooine

Discussões sobre Jogos, Programação e Criação de Jogos misturados ao Universo, à Vida e Tudo Mais.

Voltar

Precedência de seletores CSS

Em Programação | 01/04/2010 19:16, atualizado em 05/04/2010 13:29

Quantas vezes, ao aplicar estilos CSS, você não se deparou com a infelicidade de descobrir que sua regra era ignorada pelo navegador, sendo que outra regra qualquer era executada em detrimento da sua?

Isso ocorre por conta de algo chamado precedência de seletores. Caso você possua uma ou mais regras CSS apontando para um mesmo elemento, ou mesmo definição de estilos em cascata para diversos elementos, o navegador segue algumas regras e executa alguns cálculos para definir qual regra será aplicada.

Relembrando...

Para tornar o artigo mais claro, vamos relembrar a estruturação de uma regra CSS, a qual é a base desta discussão:

	span { color: #dcdcdc; }

Onde:

• span: é um seletor, definindo em quais elementos HTML a regra será aplicada;
• color: é uma propriredade, definindo um aspecto de estilo a ser utilizado;
• #dcdcdc: é um valor de propriedade, definindo o valor para o qual a propriedade deve ser configurada;
• color: #dcdcdc: é uma declaração;
• span { color: #dcdcdc; }: é a regra CSS propriamente dita.

Finalizadas as preliminares, vamos à tal precedência de seletores.

Regras de precedência

Caso os seletores sejam os mesmos, como no exemplo

	div { background-color: #0000ff; }
	div { background-color: #ff0000; }

o último seletor apresentado será o válido e a regra que o representa será aplicada. No caso do exemplo, a div terá a cor de fundo vermelha (#ff0000) - a última regra apresentada - e não azul (#0000ff).

Entretanto, quando há mais de um seletor referenciando um mesmo elemento com regras conflitantes, como no exemplo

	div.Pai div { background-color: #ff0000; }
	div 		{ background-color: #0000ff; }

o navegador realiza um cálculo para definir qual seletor possui maior precedência para aplicação da regra.

Cálculo de precedência

O cálculo de precedência é algo simples, e envolve a quantidade e tipos dos seletores envolvidos na composição na regra.

Dados três valores x, y e z, sendo

• x: quantidade de seletores do tipo id existentes na regra CSS;
• y: quantidade de seletores do tipo classe ou pseudoclasse;
• z: quantidade de seletores do tipo HTML;

para o cálculo da precedência dos seletores, os três valores deverão ser calculados para cada seletor e postos na ordem x,y,z, sendo comparados entre si a partir de suas posições. O maior valor lido da esqueda para direita é aquele que possuirá maior precedência.

Para o exemplo apresentado mais acima:

• div.Pai possui 1 seletor do tipo classe e 1 seletor do tipo HTML;
• div possui 1 seletor do tipo HTML.

Logo:

• div.Pai: 0,1,1;
• div: 0,0,1.

Assim, o seletor div.Pai possui maior precedência, dado que seu valor (0,1,1) é maior que o valor da div (0,0,1).

Dicas

• Seletores do tipo id sempre terão precedência máxima;
• Seletores classe ou pseudoclasse sempre terão precedência sobre seletores do tipo HTML;
• Lembre-se de que um seletor com o valor 0,11,0 tem MENOR precedência que um seletor de valor 1,0,0.

Ao infinito e além

Caso tenha alguma dúvida, curiosidade, trauma ou angústia sobre o artigo, ou apenas deseja elogiá-lo, utilize o espaço de comentários mais abaixo para entrar em contato.

Seguem abaixo alguns links interessantes:

• Specificity, tutorial bacana no HTML Dog
• A especificidade e o efeito cascata, no site do clássico Maujor.
• CSS Specificity And Inheritance, artigo bem completo do Smashing Magazine sobre precedência de seletores e herança em CSS.

Topo