:is()

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с января 2021 года.

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

Примечание: Изначально названная :matches() (и :any()), этот селектор был переименован в :is() в CSSWG issue #3258.

Попробовать

Синтаксис

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

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

Разница между :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 dir ul,
ol ol menu,
ol ul menu,
ol menu menu,
ol dir menu,
ol ol dir,
ol ul dir,
ol menu dir,
ol dir dir,
ul ol ul,
ul ul ul,
ul menu ul,
ul dir ul,
ul ol menu,
ul ul menu,
ul menu menu,
ul dir menu,
ul ol dir,
ul ul dir,
ul menu dir,
ul dir dir,
menu ol ul,
menu ul ul,
menu menu ul,
menu dir ul,
menu ol menu,
menu ul menu,
menu menu menu,
menu dir menu,
menu ol dir,
menu ul dir,
menu menu dir,
menu dir dir,
dir ol ul,
dir ul ul,
dir menu ul,
dir dir ul,
dir ol menu,
dir ul menu,
dir menu menu,
dir dir menu,
dir ol dir,
dir ul dir,
dir menu dir,
dir dir dir {
  list-style-type: square;
}

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

/* 3-deep (or more) unordered lists use a square */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  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;
}

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

Спецификация
Селекторы Уровень 4 # matches-pseudo

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`:is`	88 12 Не поддерживает комбинаторы.	88 79 Не поддерживает комбинаторы.	78 4 ["Не поддерживает комбинаторы.", "См. баг 906353."]	74 15 Не поддерживает комбинаторы.	149 5 Не поддерживает комбинаторы.	88 18 Не поддерживает комбинаторы.	79 4 ["Не поддерживает комбинаторы.", "См. баг 906353."]	63 14 Не поддерживает комбинаторы.	149 5 Не поддерживает комбинаторы.	15.01.09.0–10.0	88 ≤37 Не поддерживает комбинаторы.
`forgiving_selector_list`	88	88	82	74	14	88	82	63	14	15.0	88

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:is