Наткнулся на интересное css правило в модуле Toolbar (включен по умолчанию в Drupal 11).
:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
&.admin-toolbar {
[data-admin-toolbar="expanded"] & {
transform: none;
}
}
}Про специфичность селекторов.
Специфичность селекторов (от высокой к низкой):
!important- максимальный приоритет- Инлайновые стили -
style="..."(1000) - ID-селекторы -
#id(100) - Классы, псевдоклассы, атрибуты -
.class,:hover,[type="text"](10) - Теги и псевдоэлементы -
div,::before(1) - Универсальный селектор -
*(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 и т.д.).