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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *