Скорее для себя, на память. О том как посчитать специфику CSS-селекторов. Все знают, что правила в CSS применяются не по порядку их написания (за одним исключением описанным ниже), а по специфике селектора. Пример:
1 2 3 4 5 6 7 |
div a { color : red; } a { color : blue; } |
Как вы думаете какого цвета будут ссылки на странице? Верно – красного, потому что селектор “div a” специфичнее (подробнее) чем просто “a”. Ещё примеры селекторов:
1 2 3 4 5 |
div.menu > a > span#first // он же #first |
Посмотрите как браузер разбирает селекторы и применяет их к элементам, пример для div.menu > a > span#first:
- Найти все элементы с id – #first (вы помните что id, должен быть уникальным на странице, да?).
- Выбрать элементы которые являются span
- Отделить только те элементы которые являются прямыми потомками тега a
- В этой подвыборке найти все элементы которые являются потомками элементов с классом menu
- Отфильтровать подвыборку, чтобы все элементы с классом menu являлись div’ами.
- Применить оформление к тем самым первым элементам, с id – #first.
Самое главное – то что браузер читает ваши селекторы справо налево. Другими словами “#menu span” будет иметь всего два шага:
- Найти все элементы span на странице
- Из них сделать подвыборку тех кто является потомком элементов с id – #menu
- Применить оформление
Что вобщем занимает меньше времени, именно такой парадигмы придерживается БЭМ.
Как посчитать специфику селектора
Оказалось всё просто, каждый параметр в селекторе обладает определённой силой, которая заранее известна, сложив все составляющие в сумме можно получить общую силу селектора.
- Элементы и псевдоэлементы (‘a, div , body, :before, :after’) составляют 1 очко.
- Классы и селекторы по аттрибутам (‘.element, [type=”text”]) получают 10 очков.
- ID (‘#header) идут за 100 очков.
- Инлайн-стили считаются за 1000 очков.
- Самый мощный параметр – ‘!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 – калькулятор который поможет вам посчитать силу селектора.
Большая часть топика подготовлена при помощи статьи.