Псевдокласс CSS `:is()`

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

Попробуйте

ol {
  list-style-type: upper-alpha;
  color: darkblue;
}

:is(ol, ul, menu:unsupported) :is(ol, ul) {
  color: green;
}

:is(ol, ul) :is(ol, ul) ol {
  list-style-type: lower-greek;
  color: chocolate;
}

<ol>
  <li>Saturn</li>
  <li>
    <ul>
      <li>Mimas</li>
      <li>Enceladus</li>
      <li>
        <ol>
          <li>Voyager</li>
          <li>Cassini</li>
        </ol>
      </li>
      <li>Tethys</li>
    </ul>
  </li>
  <li>Uranus</li>
  <li>
    <ol>
      <li>Titania</li>
      <li>Oberon</li>
    </ol>
  </li>
</ol>

Синтаксис

:is(<forgiving-selector-list>) {
  /* ... */
}

Параметры

Псевдокласс :is() требует в качестве аргумента список селекторов — разделённый запятыми перечень из одного или нескольких селекторов. Список не должен содержать псевдоэлемент, но допускаются любые другие простые, составные и сложные селекторы.

Различия между :is() и :where()

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

Непрерывный разбор селекторов

Согласно спецификации, :is() и :where() принимают список селекторов с допустимыми ошибками.

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

:is(:valid, :unsupported) {
  /* … */
}

Будет по-прежнему корректно разобран и выберет :valid даже в браузерах, не поддерживающих :unsupported. В то время как:

:valid,
:unsupported {
  /* … */
}

Будет проигнорирован в браузерах, не поддерживающих :unsupported, даже если они поддерживают :valid.

Примеры

Упрощение списков селекторов

Псевдокласс :is() позволяет значительно упростить CSS-селекторы. Например, рассмотрим следующий CSS:

/* 3-deep (or more) unordered lists use a square */
ol ol ul,
ol ul ul,
ol menu ul,
ol ol menu,
ol ul menu,
ol menu menu,
ul ol ul,
ul ul ul,
ul menu ul,
ul ol menu,
ul ul menu,
ul menu menu,
menu ol ul,
menu ul ul,
menu menu ul,
menu ol menu,
menu ul menu,
menu menu menu {
  list-style-type: square;
}

Его можно заменить на:

/* 3-deep (or more) unordered lists use a square */
:is(ol, ul, menu) :is(ol, ul, menu) :is(ul, menu) {
  list-style-type: square;
}

Упрощение селекторов разделов

Псевдокласс :is() особенно полезен при работе с разделами и заголовками HTML. Поскольку <section>, <article>, <aside> и <nav> часто вкладываются друг в друга, без :is() бывает сложно оформить их одинаково.

Например, без :is() оформление всех элементов h1 на разных уровнях может оказаться очень сложным:

/* Level 0 */
h1 {
  font-size: 30px;
}

/* Level 1 */
section h1,
article h1,
aside h1,
nav h1 {
  font-size: 25px;
}

/* Level 2 */
section section h1,
section article h1,
section aside h1,
section nav h1,
article section h1,
article article h1,
article aside h1,
article nav h1,
aside section h1,
aside article h1,
aside aside h1,
aside nav h1,
nav section h1,
nav article h1,
nav aside h1,
nav nav h1 {
  font-size: 20px;
}

/* Level 3 */
/* don't even think about it! */

Однако с помощью :is() это сделать гораздо проще:

/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* Level 2 */
:is(section, article, aside, nav) :is(section, article, aside, nav) h1 {
  font-size: 20px;
}
/* Level 3 */
:is(section, article, aside, nav)
  :is(section, article, aside, nav)
  :is(section, article, aside, nav)
  h1 {
  font-size: 15px;
}

:is() не выбирает псевдоэлементы

Псевдокласс :is() не соответствует псевдоэлементам. Поэтому вместо этого:

some-element:is(::before, ::after) {
  display: block;
}

или этого:

:is(some-element::before, some-element::after) {
  display: block;
}

используйте:

some-element::before,
some-element::after {
  display: block;
}

Спецификации

Совместимость с браузерами

См. также

• :where() — как :is(), но со специфичностью 0.
• Список селекторов
• Веб-компоненты