11. Псевдоклассы :is(), :where(), :has()

CSS: Псевдоклассы :is(), :where(), :has()

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

Концепция и примеры

:is()

Псевдокласс :is() позволяет группировать селекторы. Он применяет стили к элементу, если он соответствует хотя бы одному из селекторов внутри скобок. Это сокращает дублирование кода и делает его более читаемым.

/* Без :is() */
header h1,
header h2,
header h3 {
  color: blue;
}

/* С :is() */
header :is(h1, h2, h3) {
  color: blue;
}

Оба примера делают одно и то же: устанавливают синий цвет текста для h1, h2 и h3 элементов внутри <header>. Но второй пример с :is() выглядит чище и его легче редактировать.

:where()

Псевдокласс :where() похож на :is(), но имеет одно важное отличие: его специфичность всегда равна нулю. Это полезно для сброса стилей или применения общих стилей, которые должны легко переопределяться другими селекторами.

/* Обычный селектор */
body h1 {
  color: red; /* Специфичность: 0-0-1 */
}

/* С :where() */
:where(body h1) {
  color: red; /* Специфичность: 0-0-0 */
}

Предположим, что у нас есть другой селектор:

.title {
  color: green !important; /* Специфичность: 0-1-0 */
}

Если h1 имеет класс title, то color: green !important переопределит color: red в первом примере (без :where()), потому что !important имеет приоритет. Во втором примере (:where()), color: red будет переопределено color: green из-за более высокой специфичности класса.

:has()

Псевдокласс :has() позволяет выбирать элементы, которые содержат определенные дочерние элементы.

/* Выбираем все div, которые содержат элемент p */
div:has(p) {
  border: 1px solid black;
}

Этот код добавит черную рамку вокруг всех элементов div, которые содержат хотя бы один элемент p.

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

<!DOCTYPE html>
<html>
<head>
  <title>Псевдоклассы</title>
  <style>
    /* :is() - стилизуем все заголовки внутри article */
    article :is(h1, h2, h3) {
      font-family: sans-serif;
      margin-bottom: 0.5em;
    }

    /* :where() - убираем margin у всех параграфов внутри main,
       чтобы легко переопределить его в другом месте */
    :where(main p) {
      margin: 0;
    }

    /* :has() - стилизуем div, содержащие картинки */
    div:has(img) {
      background-color: #f0f0f0;
      padding: 1em;
    }
  </style>
</head>
<body>
  <main>
    <article>
      <h1>Заголовок статьи</h1>
      <p>Некоторый текст статьи.</p>
      <h2>Подзаголовок</h2>
      <p>Еще текст статьи.</p>
    </article>

    <div>
      <p>Текст без картинки</p>
    </div>

    <div>
      <img src="image.jpg" alt="Изображение">
      <p>Текст с картинкой</p>
    </div>
  </main>
</body>
</html>

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

Многие CSS-фреймворки, такие как Bootstrap и Tailwind CSS, используют :is() и :where() для уменьшения дублирования кода и упрощения переопределения стилей. Например, они могут использовать :is() для стилизации разных элементов формы (input, textarea, select) одним набором правил. :where() может быть использован для сброса стилей по умолчанию, чтобы разработчики могли легко настроить внешний вид компонентов. :has() пока менее распространен, но его можно увидеть в проектах, где требуется условная стилизация в зависимости от наличия определенных дочерних элементов.

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

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