Повышаем свой уровень в CSS: селектор :has()

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

Cелектор :has()

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

В настоящее время поддержка :has() растет и по ссылке вы можете посмотреть где он уже поддерживается.

Селектор :has() – Комбинированные селекторы

Селектор :has() можно комбинировать с другими селекторами для более сложных выборок. Например, вы можете выбрать все элементы <div>, содержащие изображения с определенными классами:

div:has(img.special-class) {
  border: 2px solid red;
}

Селектор :has() – Псевдоклассы

Псевдоклассы могут быть использованы внутри :has() для более точной фильтрации. Например, чтобы выбрать все элементы с ссылками (<a>), но только те, которые содержат изображение:

div:has(a:has(img)) {
  background-color: #f0f0f0;
}

Селектор :has() – Несколько уровней вложенности

:has() поддерживает несколько уровней вложенности, что делает его мощным инструментом для выборки глубоко вложенных элементов. Например, выборка всех элементов <div>, содержащих <p>, содержащих <a>:

div:has(p:has(a)) {
  font-weight: bold;
}

Практические примеры

Давайте рассмотрим несколько практических примеров использования :has().

Выделение цитат

Предположим, вы хотите выделить все цитаты в вашем тексте:

p:has(q) {
  background-color: #ffffcc;
  border-left: 4px solid #999;
  padding: 10px;
}

Скрытие пустых элементов

Если вы хотите скрыть все пустые <div>, это можно сделать так:

div:has(:empty) {
  display: none;
}

Оформление сносок

Вы можете оформить сноски в ваших статьях следующим образом:

sup:has(a) {
  text-decoration: underline;
  color: #0066cc;
}

Заключение

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

Александр Сокирка

Занимаюсь веб разработкой с 2007 года. Имею большой опыт в веб-дизайне и разработке сайтов. Являюсь автором YouTube канала Быть Программистом. Основатель бренда Aletheme и автор тем для WordPress на маркетплэйсе Envato. С 2017 года занимаюсь обучением людей желающим стать программистами. Мои обучающие программы можно найти на этом сайте или на Udemy.