Псевдокласс :has() проверяет, содержит ли родитель хотя бы один конкретный элемент или выполняется ли условие, например, если кнопка находится в фокусе.
Например, допустим есть такой фрагмент кода:
В этом CSS-коде мы проверяем, содержит ли родительский элемент div дочерний тег с классом “cardImage”, если да, то данному тегу div применится свойство background-color со значением yellow.
Также мы можем использовать псевдокласс :has() вместе с комбинаторами, например:
Здесь мы применим стиль к тем тегам <p>, которые следуют сразу за h2.
Давайте также рассмотрим псевдоклассы :is() и :where(), так как я и в курсе не разбирал. Псевдокласс :is() работает наоборот. Допустим, у нас есть такой код:
В этом примере стиль font-weight будет действовать на те теги <h1>, которые находятся внутри тегов <article>, <section> и <aside>.
А если мы все тоже самое напишем, только с псевдоклассом :where():
Будет все тоже самое. Но тогда чем отличаются :is() и :where()? Дело в том, что все что находится внутри :where() будет всегда иметь нулевую специфичность. Неважно, селекторы id там у вас или класса, специфичность их внутри :where() всегда равно 0. А внутри :is() специфичность селекторов сохраняется.