Глосарій

Специфічність CSS

Специфічність (specificity) — алгоритм, за яким браузер вирішує, який CSS-правило «перемагає» при конфлікті. Вищча специфічність = правило застосовується.

Рахунок специфічності

Три групи: (A, B, C)

A — inline styles (style="..."): 1,0,0
B — ID-селектори (#main): 0,1,0 кожен
C — class, псевдоклас, атрибут (.btn, :hover, [type]): 0,0,1 кожен
Теги і псевдоелементи (div, ::before): 0,0,1, але в окремому рахунку

Приклади

#nav .item a:hover  → (0,1,2)  /* ID + class + псевдоклас */
.btn.btn-primary    → (0,0,2)
button              → (0,0,1)
/* Перемагає перший */

!important

!important перекриває будь-яку специфічність. Уникайте — робить CSS непередбачуваним. Виправданий лише для утиліт (.hidden { display: none !important; }).

Порядок при рівній специфічності

Перемагає правило, оголошене пізніше у CSS.