Специфичность CSS для :not(), :has() и :matches()

Специфичность CSS для :not(), :has() и :matches()

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

Во-первых, я хотел бы прояснить то, что некоторые люди, возможно, нашли сбивающим с толку. В этом посте я сказал: Но оказывается, что обратный псевдо-класс не считается псевдо-классом.

Это может быть понято некоторыми людьми так, что вся отрицательная часть селектора игнорируется для целей специфичности, особенно если вы не знаете спецификации. Поэтому рассмотрим следующее:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В порядке слева направо это селектор элемента (div), обратный псевдо-класс (:not), селектор класса (.one) и селектор другого элемента (p). Два элемента селектора и один селектор классов подсчитываются по специфичности, что дает общее число 0,0,1,2. Это та же специфичность, что и для div.one p, хотя два селектора выбирают разные вещи.

В старые добрые дни это было достаточно легко, потому что :not() мог содержать только простой селектор. Все стало сложнее теперь, когда :not() может принимать сгруппированные селекторы. Поэтому в какой-то момент мы сможем сказать:

Таким образом, будет выбран любой элемент p, который не происходит от div, который имеет класс, содержащий one или two (или оба), или имеющий идентификатор navbar.

Но как мы вычисляем специфику всего селектора? Просто сложить все части? Нет. Рабочая группа недавно решила, что специфика, внесенная внутри :not(), будет равна единому селектору с наивысшей специфичностью. Так что в div:not(.one, .two, #navbar) p селектор #navbar дает 0,1,0,0 в общую специфичность селектора, что даст всего 0,1,0,2. Специфичность one и two игнорируется.

Этот же подход будет использоваться для псевдо-классов :has() и :matches(). Таким образом, мы получаем следующее:

В первом случае части, которые складываются вместе, дают footer#pageend и a[href], поэтому это один идентификатор, один атрибут и два элемента. Во втором — это article и a.external для одного класса и двух элементов. И в последнем мы добавляем input и любой из селекторов атрибутов [type = ""], так как их специфичности равны, что означает, что мы добавляем один атрибут и один элемент.

Насколько мне известно, до сих пор не существует концепции близости дерева DOM в CSS. Я по-прежнему готов держать пари, что это будет оставаться так, хотя поставил бы на это меньше денег, чем шесть лет назад.

Автор: Eric A. Meyer

Источник: https://meyerweb.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree