Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Селекторы CSS

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>

Результат

  • Пункт родительского списка
    • Пункт дочернего списка
    • Пункт дочернего списка
  • Пункт родительского списка
  • Пункт родительского списка
    1. Пункт дочернего списка
    2. Пункт дочернего списка
  1. Пункт родительского списка
  2. Пункт родительского списка
    • Пункт дочернего списка
    • Пункт дочернего списка
  3. Пункт родительского списка
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2025 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru