47. :has() — родительский селектор

Иллюстрация к уроку В этом уроке мы изучим мощный CSS селектор :has(), который позволяет стилизовать родительские элементы на основе наличия определенных дочерних элементов. Долгожданный родительский селектор открывает новые возможности для динамической стилизации веб-страниц.

Что такое :has()?

:has() – это псевдокласс CSS, который позволяет выбрать элемент на основе того, содержит ли он внутри себя определенный элемент, соответствующий переданному в скобках селектору. Другими словами, мы можем стилизовать родителя, если у него есть определенный ребенок.

Примеры кода

Предположим, у нас есть следующая HTML структура:

<div class="container">
  <p>Текст внутри контейнера.</p>
</div>

<div class="container">
  <p>Текст внутри контейнера.</p>
  <button>Кнопка</button>
</div>

Мы можем стилизовать контейнер, только если он содержит кнопку, используя :has():

.container:has(button) {
  border: 2px solid blue;
  background-color: lightblue;
}

В результате, только второй div с классом container будет иметь синюю рамку и светло-голубой фон, потому что только он содержит элемент <button>.

Другой пример: стилизация li, если внутри есть ссылка с классом active:

<ul>
  <li>Текст</li>
  <li><a href="#">Ссылка</a></li>
  <li><a href="#" class="active">Активная ссылка</a></li>
</ul>

li:has(a.active) {
  font-weight: bold;
}

В этом случае, только третий li станет жирным, так как только внутри него находится ссылка с классом active.

Практические примеры кода с комментариями

<div class="card">
  <img src="image1.jpg" alt="Изображение">
  <div class="card-body">
    <h3>Заголовок карточки</h3>
    <p>Описание карточки.</p>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h3>Заголовок карточки</h3>
    <p>Описание карточки.</p>
  </div>
</div>

.card {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

/* Стилизуем карточку, только если она содержит изображение */
.card:has(img) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Стилизуем заголовок карточки, только если у родителя есть изображение */
.card:has(img) .card-body h3 {
  color: green;
}

Жизненный пример

:has() часто используется для создания адаптивных интерфейсов. Например, можно изменить макет карточки в зависимости от наличия определенных элементов. Во фреймворках UI, таких как Bootstrap или Material UI, :has() может использоваться для динамической стилизации компонентов. Например, в системе форм можно визуально выделять поля, если они содержат ошибки (элементы с классом error).

<form>
  <input type="text" placeholder="Имя">
  <span class="error">Обязательное поле</span>
</form>

<form>
  <input type="text" placeholder="Email">
</form>

form:has(.error) input {
  border: 1px solid red;
}

В этом примере, первое поле input получит красную границу, так как его родительский form содержит элемент с классом error.

Ключевые моменты

:has() позволяет стилизовать родительские элементы на основе наличия дочерних элементов.
Это мощный инструмент для создания динамических и адаптивных интерфейсов.
Поддержка :has() в браузерах постоянно улучшается, поэтому важно проверять совместимость.
Можно использовать сложные селекторы внутри :has() для более точного таргетинга.
:has() делает CSS более выразительным и уменьшает необходимость в JavaScript для простых задач стилизации.