Какво е специфичност в CSS?

Специфичността в CSS е механизъм, който определя коя стилова правило ще бъде приложено към елемент, ако към него са приложени няколко правила.

Всяки селектор има собствена точкова система за специфичност. По-високият резултат означава по-висок приоритет.

Изчисляването на специфичността се базира на броя на следните компоненти в селектора (от най-важния към по-малко важния):

• Стотки (1000): Правила с !important (имат най-висок приоритет, но употребата им не се препоръчва).
• Стотки (100): Inline стилове (писани директно в атрибута style на HTML елемента).
• Стотки (100): Идентификатори (селектори по id, например #моят-елемент).
• Десетки (10): Класове (селектори по .клас), псевдокласове (например :hover, :focus), атрибути (например [type="text"]).
• Едно (1): Типове елементи (имена на HTML тагове, например div, p), псевдоелементи (например ::before, ::after).
• Нула (0): Универсален селектор (*), съединители (>, +, ~), селектори на родител (:not(), :is(), :where()) не добавят специфичност сами по себе си, но могат да влияят върху специфичността вътре в скобите.

Пример за изчисление:

• p { ... } - Специфичност: 0-0-0-1
• .моя-клас { ... } - Специфичност: 0-0-1-0
• #моя-ид { ... } - Специфичност: 0-1-0-0
• div.моя-клас { ... } - Специфичност: 0-0-1-1
• ul > li.клас[data-id="1"] { ... } - Специфичност: 0-0-2-2 (li, ul = 2; .клас, [data-id="1"] = 2)

Ако две правила имат еднаква специфичност, се прилага това, което е по-долу в CSS файла.

Пример:

/* файл style.css */
.моят-елемент {
  цвят: син; /* Специфичност: 0-0-1-0 */
}

#елемент-id {
  цвят: червен; /* Специфичност: 0-1-0-0 */
}

.моят-елемент {
  font-weight: bold; /* Специфичност: 0-0-1-0, презаписва предишното правило със същата специфичност */
}

В този случай текстът на елемента с id елемент-id ще бъде червен, а текстът на елемента с клас моят-елемент ще бъде син и удебелен (синьото се презаписва с червеното поради по-високата специфичност на #елемент-id).

Разбирането на специфичността е важно за писане на предсказуем CSS, който е лесен за поддръжка. Избягвайте прекалено сложна специфичност и използването на !important за по-добро управление на стиловете.