Статья проливает свет на недостаточно используемую в настоящее время функцию CSS — :has псевдокласс, который потенциально может революционизировать наш подход к написанию таблиц стилей. После полной поддержки браузерами этот селектор бросит вызов нашему фундаментальному пониманию CSS, поскольку :has впервые в CSS вводится концепция родительского селектора.
Понимание :has псевдокласса
Для иллюстрации рассмотрим пример:
div:has(p) {
background: red;
}
На момент написания этой статьи :has псевдокласс не поддерживается ни одним браузером. Однако единственная строка CSS выше предназначена для изменения цвета фона только для div элементов, содержащих p элемент. Если a div не содержит a p, стиль применяться не будет. Эта концепция одновременно интригующая и удивительно простая.
Еще один пример:
div:has(+ div) {
color: blue;
}
Здесь стиль применяется только к div элементам, за которыми следует другой div. :has Псевдокласс, таким образом, действует как родительский селектор, изменяя родительский элемент на основе наличия или отсутствия определенных дочерних или смежных элементов.
Этот новый подход на первый взгляд может показаться странным, тем более что традиционная модель CSS всегда заключалась в стилизации дочерних элементов от родительского элемента вниз. Типичная ментальная модель для CSS выглядит примерно так:
/* Not valid CSS, just an illustration */
.parent {
.child {
color: red;
}
}
В CSS стили переходят каскадом от родительского элемента к дочернему, никогда не создавая резервную копию дерева. :has Псевдокласс нарушает эту схему, позволяя применять стили к родительскому элементу на основе наличия дочернего элемента. Это изменение связано со значительными проблемами производительности при обработке браузером; выбор родительского элемента может привести к различным проблемам с производительностью. Но если отбросить эти проблемы, перспективы с :has являются одновременно захватывающими и пугающими.
Практическое применение
Рассмотрите возможность применения стилей только к ссылкам, содержащим изображения:
a:has(img) {
border: 20px solid white;
}
Такое использование :has было бы практичным, позволяя создавать стили на основе содержимого. Другое потенциальное применение может включать добавление отступов или полей в зависимости от содержимого элемента.
В настоящее время :has псевдокласс не поддерживается браузерами, но является частью спецификации CSS Selectors Level 4, которая находится в состоянии черновика. Эта спецификация включает другие полезные решения, такие как :not псевдокласс, который, в отличие от :has, имеет достойную поддержку браузера и может быть использован уже сейчас:
ul li:not(:first-of-type) {
color: red;
}
В спецификации CSS Selectors Level 4 также представлен :is селектор, поддерживаемый основными браузерами:
:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
color: #BADA55;
}
/* This is equivalent to: */
section h1, section h2, section h3, section h4, section h5, section h6,
article h1, article h2, article h3, article h4, article h5, article h6,
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6,
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
color: #BADA55;
}
Хотя :has он остается в состоянии ожидания, его собратья :not и :is уже невероятно полезны. Это всего лишь несколько селекторов из рабочего проекта CSS Selectors Level 4, обещающих более динамичное и гибкое будущее CSS.
