Voltar

Precedência de seletores CSS

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

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:

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

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:

Logo:

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

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:

Comentários
Comentar
Campos marcados com * são obrigatórios. Seu e-mail não será exibido.
*
*
*
Captcha *
CATEGORIAS AO TOPO E ALÉM LUGARES PARA IR
Topo

“Humans have a broad emotional palette. Games are good at accessing a small part of that palette.” - Robin Hunicke