Перейти к основному содержанию

Повышение специфичности селектора через виртуальный ID

Наткнулся на интересное css правило в модуле Toolbar (включен по умолчанию в Drupal 11).

:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
    &.admin-toolbar {
        [data-admin-toolbar="expanded"] & {
            transform: none;
        }
    }
}

Про специфичность селекторов.

Специфичность селекторов (от высокой к низкой):

  1. !important - максимальный приоритет
  2. Инлайновые стили - style="..." (1000)
  3. ID-селекторы - #id (100)
  4. Классы, псевдоклассы, атрибуты - .class, :hover, [type="text"] (10)
  5. Теги и псевдоэлементы - div, ::before (1)
  6. Универсальный селектор - * (0)
Специфичность сущностей складываются. 

Т.е.:
#id {}         = #id (100) = 100
#id div {}     = #id (100) + div (1) = 101
#id .class div = #id (100) + .class (10) + div (1) = 111
.class1.class2 .class3  = .class1 (10) + .class2 (10) + .class3 (10) = 30
.class1 .class3 .class4 = .class1 (10) + .class3 (10) + .class4 (10) = 30

Да, при !important всё равно учитывается специфичность:

#id .class {  rule: value !important; } = 110 + important  # побеждает 
#id {  rule: value !important; }  = 100 + important
 

Вернемся к правилу из Toolbar

Для повышения специфичности правила икуственно вводят псевдокласс :is 
:is - логический псевдокласс, который проверяет, попадает ли селектор хотя бы под один из перечисленных внутри селекторов.
В данном случае это:

  • #extra-specificity-hack — ID селектор со специфичностью 100
  • [data-drupal-admin-styles] — атрибутный селектор со специфичностью 10 

И, хотя, селектора с ID #extra-specificity-hack не существует (он выдуман) общая специфичность селектора будет рассчитана, как будто бы в правиле присутствует ID, т.к. :is бедет максимальную специфичность из своих элементов.

Т.е.:
для правила [data-drupal-admin-styles] специфисчность равна 10,
а для правила :is(#extra-specificity-hack, [data-drupal-admin-styles]) специфичность будет 100, что может перебить простые стили, приносимые со стороны (других модулей, самого drupal и т.д.).

Tags