Таблицы стилей ЦСС — набор правил, которые определяют свойства элементов в зависимости от их иерархии и контекста. Каждый элемент может быть описан сколько угодно раз, но финальный набор правил и свойств, которые браузер применит к каждому элементу, должен быть детерминированным.

В русскоязычных статьях термин specificity переводят как «специфичность», но на мой взгляд, его суть лучше передаётся словом «вес»

В стандарте ЦСС описан алгоритм для определения правила, которое должно быть применено к элементу. Каждое правило имеет своё значение specificity, которое зависит от используемых селекторов и автоматически рассчитывается браузером. Правила с большей специфичностью перевешивают правила с меньшей специфичностью, переопределяют их и используются браузером при отрисовке страницы.

В русскоязычных статьях термин specificity переводят как «специфичность», но на мой взгляд, его суть лучше передаётся словом «вес»

Простыми словами принцип можно описать так — чем конкретнее задан селектор правила, тем больше его «вес».

Выбор конкретного правила зависит от трёх составляющих (в порядке возрастания значимости):

  1. Порядок правила в коде.

  2. Значение специфичности селектора.

  3. Модификатор !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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы