Скорее для себя, на память. О том как посчитать специфику 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 — калькулятор который поможет вам посчитать силу селектора.
Большая часть топика подготовлена при помощи статьи.