Использование нового псевдокласса :has в качестве родительского селектора CSS

Введение

Современные браузеры начали поддерживать псевдокласс :has. Safari поддерживает его с марта 2022 года, а Chrome только что выпустил новую версию в августе 2022 года, которая поддерживает его. В Firefox его можно использовать, включив флаг layout.css.has-selector.enabled.

Селектор псевдокласса :has() может быть использован в качестве родительского селектора. Он очень мощный, поскольку принимает в качестве аргумента относительный список селекторов, поэтому его возможности безграничны.

Пример

Давайте рассмотрим несколько примеров использования псевдокласса :has. У нас есть следующая html-структура:

<div>
  <div>
    <img src="ocean.jpeg" />
    <p>Image description.</p>
  </div>
  <div>
    <img src="html.jpg" />
  </div>
</div>

У нас есть два изображения, одно с описанием, другое без.

Сначала мы выберем элемент div, который содержит изображение с описанием. Для этого мы можем использовать дочерний селектор > следующим образом: div:has(> p). Для нашего примера этого достаточно, но можно сделать что-то более специфическое, например, объединить селектор child и смежный селектор sibling + следующим образом: div:has(> img + p).

Для нашего примера мы можем использовать оба варианта.

div:has(> p) {
  border: 2px solid #000;
  border-radius: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

Теперь мы уберем поля изображения, имеющего описание, и придадим ему радиус границы.

img:has(+ p) {
  margin: 0;
  border-radius: 5%;
}

Наконец, мы собираемся придать изображению без описания некоторый радиус границы. Для этого мы используем псевдокласс :not().

img:not(:has(+ p)) {
  border-radius: 50%;
}

Вот окончательный результат:

Вы также можете увидеть HTML, отображенный внизу этой страницы. Помните, что только если вы используете один из браузеров, который уже поддерживает псевдокласс :has, вы увидите результат.

Ресурсы

• Поддержка браузеров
• Документация по :has() — mdn web docs