Таблицы стилей ЦСС — набор правил, которые определяют свойства элементов в зависимости от их иерархии и контекста. Каждый элемент может быть описан сколько угодно раз, но финальный набор правил и свойств, которые браузер применит к каждому элементу, должен быть детерминированным.
В русскоязычных статьях термин specificity переводят как «специфичность», но на мой взгляд, его суть лучше передаётся словом «вес»
В стандарте ЦСС описан алгоритм для определения правила, которое должно быть применено к элементу. Каждое правило имеет своё значение specificity, которое зависит от используемых селекторов и автоматически рассчитывается браузером. Правила с большей специфичностью перевешивают правила с меньшей специфичностью, переопределяют их и используются браузером при отрисовке страницы.
В русскоязычных статьях термин specificity переводят как «специфичность», но на мой взгляд, его суть лучше передаётся словом «вес»
Простыми словами принцип можно описать так — чем конкретнее задан селектор правила, тем больше его «вес».
Выбор конкретного правила зависит от трёх составляющих (в порядке возрастания значимости):
Порядок правила в коде.
Значение специфичности селектора.
Модификатор
!important.
На самом деле специфичность рассчитывается несколько иным способом, но таблица отражает настоящие значения
Таблица для расчёта специфичности селекторов выглядит так:
На самом деле специфичность рассчитывается несколько иным способом, но таблица отражает настоящие значения
| Тип селектора | Пример | Специфичность |
| Инлайновый стиль | <p style="color: red;"> | 1000 |
| Идентификатор элемента | #button { color: green } | 100 |
| Класс, селектор по атрибуту, псевдокласс | .active { color: white; }[name="address"] { color: black; }:hover { color: red; } | 10 |
| Тег, псевдоэлемент | a { text-underline: none; }::placeholder { color: gray; } | 1 |
Исходя из этой таблицы, каждое правило в таблице стилей будет иметь свою специфичность, например:
| Селектор | Типы селекторов | Специфичность |
.menu a { color: white; } | Класс и тег | 10 + 1 = 11 |
#menu a:hover { color: blue; } | Идентификатор, тег и псевдокласс | 100 + 1 + 10 = 111 |
form.large input[type="checkbox"]::after { color: #555; } | Тег, класс, тег, селектор по атрибуту и псевдоэлемент | 1 + 10 + 1 + 10 + 1 = 23 |
.thumb > a:hover img { transform: scale(1.3); } | Класс, тег, псевдокласс, тег | 10 + 1 + 10 + 1 = 22 |
Комбинаторы >, +, ~, селектор * и псевдокласс :not не влияют на специфичность.
Если два разных правила имеют одинаковую специфичность и влияют на один и тот же элемент, то перевесит правило, которое стоит ниже в коде. Свойство с модификатором !important перевешивает все прочие свойства.
Чтобы пересилить !important, придётся добавить новый !important в правило с большей специфичностью, или поставить селектор с такой же специфичностью и !important позже в коде. Злоупотребление флагом !important часто приводит к тому, что весь каскад правил начинает выходить из под контроля разработчика.
Специфичность селекторов — это внутренний механизм и алгоритм работы ЦСС, который описан в стандарте, реализован в браузерах, но напрямую не виден разработчикам. Специфичность нельзя прочитать и нельзя задать напрямую, но полезно знать о том как она работает, чтобы применять ЦСС более эффективно и добиваться решения задачи минимальными средствами.
Что ещё почитать
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.