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

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

.tbl td, .tbl th { padding: 0.5rem; }

с помощью :is() можно записать по-другому:

.tbl :is(td, th) { padding: 0.5rem; }

Синтаксис

Селектор:is(<список селекторов>) { … }
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

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

:is(aside, section, header, footer) { background: #333; color: #fff; }

Устанавливает цвет фона и текста для элементов <aside>, <section>, <header> и <footer>.

:is(ol, ul) > li { margin-bottom: 0.5rem; }

Устанавливает поле снизу для элементов <li> внутри списков <ol> и <ul>.

:is(h1, h2, h3) { font-family: sans-serif; }

Устанавливает шрифт без засечек для заголовков <h1>, <h2> и <h3>.

.block :is(h2, .title) { font-size: 2em; }

Устанавливает размер шрифта для заголовков <h2> и элементов с классом .title, расположенных внутри элемента с классом .block.

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>:is()</title> <style> .tbl { --b: 1px solid #333; /* Параметры линии */ width: 100%; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные линии */ } .tbl, .tbl td { border-bottom: var(--b); /* Линия снизу */ border-top: var(--b); /* Линия сверху */ } .tbl th { background: #f5e8d0; /* Цвет фона ячеек */ } .tbl td { text-align: center; /* Выравнивание по центру */ } .tbl thead tr:nth-child(1) th:nth-child(1), .tbl tbody td:nth-child(1) { text-align: left; /* Выравнивание по левому краю */ } .tbl :is(td, th) { padding: 0.5em; /* Поля в ячейках */ } </style> </head> <body> <table class="tbl"> <thead> <tr> <th rowspan="2">Вид соединения</th> <th colspan="2">Поля допусков ширины шпоночного паза</th> </tr> <tr> <th>Вал</th><th>Втулка</th> </tr> </thead> <tbody> <tr> <td>Свободное</td><td>H9</td><td>D10</td> </tr> <tr> <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td> </tr> <tr> <td>Плотное</td><td colspan="2">P9</td> </tr> </tbody> </table> </body> </html>

Примечание

Селекторы, содержащие разные браузерные префиксы, нельзя группировать вместе. Ниже показан пример, в котором применяется префикс -moz- для браузера Firefox и префикс -webkit- для браузеров на основе движка Webkit и Blink.

:is(meter::-moz-meter-bar, meter::-webkit-meter-optimum-value) {
  background: #7367f0;
}

Приведённый выше пример работать не будет и его следует модифицировать, повторив набор стилевых свойств для каждого селектора отдельно:

meter::-moz-meter-bar {
  background: #7367f0;
}

meter::-webkit-meter-optimum-value) {
  background: #7367f0;
}

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

Selectors Level 4

Браузеры

88 88 75 14 78
88 79 63 14

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.
Псевдоклассы