CSS псевдокласс :is()
Псевдокласс :is()
принимает список селекторов, которые указываются в круглых скобках, и выбирает любой элемент, который соответствует одному из селекторов в этом списке.
/* Выбор элемента <li>, если он расположен в
нумерованном или маркированном списке,
который вложен в другой список */
:is(ol, ul) :is(ol, ul) li { font-style: italic; }
/* эквивалентно */
ol ol li,
ol ul li,
ul ol li,
ul ul li { font-style: italic; }
Псевдокласс :is()
может содержать один селектор или список селекторов, разделённых запятыми. Допускаются любые простые, составные и сложные селекторы, кроме псевдоэлементов.
Псевдокласс :is()
учитывается в специфичности всего селектора, он принимает специфичность наиболее специфичного селектора из своего списка селекторов.
В CSS при использовании группировки селекторов, если один из селекторов является некорректным, то весь список селектор считается недействительным и стили не применяются. При использовании псевдокласса :is()
вместо группировки селекторов, некорректный селектор из списка будет просто проигнорирован, всё остальное будет работать в обычном режиме.
Пример
:is(ol, ul) { color: #009933; }
:is(ol, ul) :is(ol, ul) li {
font-style: italic;
color: #ff944d;
}
<ul>
<li>Пункт родительского списка
<ul>
<li>Пункт дочернего списка</li>
<li>Пункт дочернего списка</li>
</ul>
</li>
<li>Пункт родительского списка</li>
<li>Пункт родительского списка
<ol>
<li>Пункт дочернего списка</li>
<li>Пункт дочернего списка</li>
</ol>
</li>
</ul>
<ol>
<li>Пункт родительского списка</li>
<li>Пункт родительского списка
<ul>
<li>Пункт дочернего списка</li>
<li>Пункт дочернего списка</li>
</ul>
</li>
<li>Пункт родительского списка</li>
</ol>
Результат
- Пункт родительского списка
- Пункт дочернего списка
- Пункт дочернего списка
- Пункт родительского списка
- Пункт родительского списка
- Пункт дочернего списка
- Пункт дочернего списка
- Пункт родительского списка
- Пункт родительского списка
- Пункт дочернего списка
- Пункт дочернего списка
- Пункт родительского списка