Мой селектор сильнее чем твой

Скорее для себя, на память. О том как посчитать специфику CSS-селекторов. Все знают, что правила в CSS применяются не по порядку их написания (за одним исключением описанным ниже), а по специфике селектора. Пример:

Как вы думаете какого цвета будут ссылки на странице? Верно – красного, потому что селектор “div a” специфичнее (подробнее) чем просто “a”. Ещё примеры селекторов:

Посмотрите как браузер разбирает селекторы и применяет их к элементам, пример для div.menu > a > span#first:

1. Найти все элементы с id – #first (вы помните что id, должен быть уникальным на странице, да?).
2. Выбрать элементы которые являются span
3. Отделить только те элементы которые являются прямыми потомками тега a
4. В этой подвыборке найти все элементы которые являются потомками элементов с классом menu
5. Отфильтровать подвыборку, чтобы все элементы с классом menu являлись div’ами.
6. Применить оформление к тем самым первым элементам, с id – #first.

Самое главное – то что браузер читает ваши селекторы справо налево. Другими словами “#menu span” будет иметь всего два шага:

1. Найти все элементы span на странице
2. Из них сделать подвыборку тех кто является потомком элементов с id – #menu
3. Применить оформление

Что вобщем занимает меньше времени, именно такой парадигмы придерживается БЭМ.

Как посчитать специфику селектора

Оказалось всё просто, каждый параметр в селекторе обладает определённой силой, которая заранее известна, сложив все составляющие в сумме можно получить общую силу селектора.

1. Элементы и псевдоэлементы (‘a, div , body, :before, :after’) составляют 1 очко.
2. Классы и селекторы по аттрибутам (‘.element, [type=”text”]) получают 10 очков.
3. ID (‘#header) идут за 100 очков.
4. Инлайн-стили считаются за 1000 очков.
5. Самый мощный параметр – ‘!important’ его значение равно NaN (Not a number)

Соответственно “div a” – даст 2 очка, а “#div a” – 101 очко. Соответственно второй селектор важнее чем первый и именно его параметры будут применены к элементам a.

В начале я упомянул о том что иногда селекторы работают именно в порядке объявления, это случается тогда когда они равны. Пример на codepen.

Несколько полезных ресурсов по теме:

– http://cssstats.com – анализ CSS файла и статистика.
– https://css-tricks.com/specifics-on-css-specificity/ – о специфике CSS-селекторов.
– http://specificity.keegan.st – калькулятор который поможет вам посчитать силу селектора.

Большая часть топика подготовлена при помощи статьи.