# Правила специфичности в CSS

В предыдущем примере оба селектора были одинаковыми и имели одинаковый приоритет. Это значит, что побеждало то свойство, которое было написано ниже.

Бывают также ситуации, когда одному элементу страницы соответствуют несколько селекторов. В этом случае при конфликте свойств победит более специфичный, то есть более точный селектор. Давайте рассмотрим правила специфичности.

## Правило первое

Класс всегда побеждает селектор тега:

`<p class="text">text</p>` `p { color: red; } .text { color: green; /* применится этот цвет */ }`

:

## Правило второе

Идентификатор всегда побеждает класс:

`<p id="elem" class="text">text</p>` `.text { color: red; } #elem { color: green; /* применится этот цвет */ }`

:

## Правило третье

При равных условиях побеждает тот селектор, у которого больше частей. Например, если у нас два селектора тегов, то победит тот, у которого тегов больше:

`<div> <p>text</p> </div>` `p { color: red; } div p { color: green; /* применится этот цвет */ }`

:

Если два селектора классов, то победит тот, в котором указано больше классов (если там будут селекторы тегов, то они не влияют):

`<div class="block"> <p class="text">text</p> </div>` `.text { color: red; } .block .text { color: green; /* применится этот цвет */ }`

:

← →
↑