В чём разница между is и where?

Разница между :is() и :where() в CSS

Оба селектора — это функции спецификации CSS Selectors Level 4, которые упрощают написание сложных селекторов. Они позволяют выбрать элементы из списка селекторов, но различаются в специфичности.

:is() селектор

:is() принимает специфичность самого мощного селектора в списке.

/* Селекторы эквивалентны по специфичности */
h1:is(.title, .heading) {
  color: blue;
}

/* Эквивалентно */
h1.title,
h1.heading {
  color: blue;
}

Пример со специфичностью

/* Специфичность: (0, 1, 1) — ID не используется */
:is(h1, h2, h3) {
  color: black;
}

/* Специфичность: (0, 2, 1) — выбирает самый мощный селектор из списка */
:is(.button, .btn, #submit) {
  padding: 10px;
}
/* Действует как будто это #submit, селектор с самой высокой специфичностью */

:where() селектор

:where() имеет нулевую специфичность, независимо от селекторов внутри.

/* Специфичность: (0, 0, 0) — ноль! */
:where(h1, h2, h3) {
  color: red;
}

/* Это легко переопределить */
h1 {
  color: blue; /* Выигрывает! Специфичность (0, 0, 1) > (0, 0, 0) */
}

Сравнение таблица

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

Пример 1: Использование :is() для компонентов

/* Упрощение множественных селекторов */
.card:is(.primary, .secondary, .tertiary) {
  border-radius: 8px;
  padding: 20px;
}

/* Вместо */
.card.primary,
.card.secondary,
.card.tertiary {
  border-radius: 8px;
  padding: 20px;
}

Пример 2: Использование :where() для базовых стилей

/* Базовые стили — низкая специфичность для переопределения */
:where(h1, h2, h3) {
  font-family: Georgia, serif;
  font-weight: bold;
}

/* Легко переопределить в компоненте */
.article h1 {
  font-family: Arial, sans-serif;
}

Пример 3: Вложенные элементы с :is()

/* Стилизация всех ссылок в разных контекстах */
article :is(h1, h2) a,
header :is(h1, h2) a {
  text-decoration: underline;
}

/* Эквивалентно */
article h1 a,
article h2 a,
header h1 a,
header h2 a {
  text-decoration: underline;
}

Пример 4: Форма с :where()

/* Базовые стили для формы — легко переопределить */
:where(input, textarea, select) {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Специфичные переопределения */
.form-error input {
  border-color: red; /* Выигрывает благодаря классу */
}

.form-success textarea {
  border-color: green;
}

Когда использовать :is()

1. Компоненты и модули — когда стили должны быть мощными

.btn:is(.primary, .secondary) {
  /* Основные стили кнопки */
}

1. Сложные селекторы — для упрощения кода

/* Вместо 6 строк */
nav :is(ul, ol) li {
  list-style: none;
}

1. Контекстные стили

article :is(p, span, div) {
  text-align: justify;
}

Когда использовать :where()

1. Утилиты и базовые стили — для легкого переопределения

:where(.container) {
  max-width: 1200px;
  margin: 0 auto;
}

1. Сброс стилей и нормализация

:where(body, html) {
  margin: 0;
  padding: 0;
}

1. Фреймворк CSS — когда пользователи должны переопределять

:where(h1, h2, h3) {
  line-height: 1.4;
}

Реальный пример с обоими селекторами

/* Утилиты и базовые стили — :where() */
:where(h1, h2, h3) {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/* Стили компонента — :is() */
.article :is(h1, h2) {
  color: navy;
  border-bottom: 2px solid navy;
  padding-bottom: 10px;
}

/* Специфичные переопределения */
.article h1 {
  font-size: 32px;
}

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

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