Regras de Especificidade em CSS

No exemplo anterior, ambos os seletores eram iguais e tinham a mesma prioridade. Isso significa que a propriedade que foi escrita por último é que prevalecia.

Há também situações em que um elemento da página corresponde a vários seletores. Neste caso, em conflito de propriedades, vencerá o seletor mais específico, ou seja, o seletor mais preciso. Vamos analisar as regras de especificidade.

Primeira regra

Uma classe sempre vence um seletor de tag:

<p class="text">texto</p>

p {
	color: red;
}
.text {
	color: green; /* esta cor será aplicada */
}

Segunda regra

Um identificador (ID) sempre vence uma classe:

<p id="elem" class="text">texto</p>

.text {
	color: red;
}
#elem {
	color: green; /* esta cor será aplicada */
}

Terceira regra

Em condições iguais, vence o seletor que tiver mais partes. Por exemplo, se tivermos dois seletores de tags, vencerá aquele que tiver mais tags:

<div>
	<p>texto</p>
</div>

p {
	color: red;
}
div p {
	color: green; /* esta cor será aplicada */
}

Se forem dois seletores de classes, vencerá aquele em que forem especificadas mais classes (se houver seletores de tags, eles não influenciam):

<div class="block">
	<p class="text">texto</p>
</div>

.text {
	color: red;
}
.block .text {
	color: green; /* esta cor será aplicada */
}