Введение
Стили, указанные для элемента с псевдоклассом
:has(), будут применены, если хотя бы один из относительных селекторов, переданных в качестве аргумента, соответствует хотя бы одному элементу.С помощью данного псевдокласса можно указать стили для родительского или предшествующего элементов.
MDN Web Docs (Переведя на русский язык).
Так что же такое :has()? Для чего он нужен? Как и где его применять? Какими браузерами поддерживается?
Все это разобрали в понятных примерах.
Псевдокласс :has()
Это псевдоклас CSS стилей, с помощью которого можно изменить родительский селектор содержащий определённый дочерний элемент, следующий за ним. Иначе говоря, он позволяет стилизовать элемент имеющий определенные условия.
Все еще сложно понять, верно? Давайте обратимся к примерам.
Пример использования :has()
Что бы легко разобраться как он работает мы набросали небольшой пример.
Предположим что у нас есть небольшое меню, в котором у одного пункта присутствует изображение.
<nav>
<a href="#">
<img src="https://www.freeiconspng.com/uploads/red-circle-icon-16.png" alt="red circle icon">
Home
</a>
<a href="#">Gallery</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
Имеем к нему следующие стили шрифта, разметки и так далее.
body {
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: .1vw;
}
nav {
display: flex;
gap: 6vw;
}
a {
text-decoration: none;
display: flex;
align-items: center;
}
img {
width: 25px;
margin-right: 5px;
}К примеру, нам необходимо изменить цвет ссылок, которые имеют в качестве дочерних элементов картинки, на красный. Это можно написать с помощью JS или же обратиться к медиазапросам, но тогда мы получим много строчек кода.
Тут как раз нам пригодится псевдокласс :has(), с его помощью мы можем изменить стили следующим образом:
a:has(> img) {
color: red;
}И получим следующий результат
Посмотреть пример можно на CodePen
Псевдокласс
:has()не может быть вложен в другой:has(), так как это может привести к циклическим запросам при выполнении поиска селектора.
Нельзя использовать псевдоэлементы в качестве аргументов в:has(), а также в качестве целевого селектора.
Поддержка в браузерах
Так как :has() появился совсем недавно, а именно в начале 2022 года, то не стоит ее сейчас использовать повсеместно, а лучше дождаться полной поддержки всеми браузерами. Как мы видим ниже, поддержка :has() в данный момент отсутствует в Mozilla Firefox и появится только в версии 121, релиз которой запланирован на декабрь 2023 года.
