:where()

Функція-псевдоклас CSS :where() (де) приймає як аргумент список селекторів і вибирає всі елементи, які можуть бути вибрані будь-яким з селекторів у цьому списку.

Різниця між :where() та :is() полягає в тому, що :where() завжди має специфічність 0, тоді як :is() приймає специфічність найбільш специфічного селектора серед своїх аргументів.

Спробуйте його в дії

Синтаксис

Псевдоклас :where() вимагає список селекторів — розділений комами список з одного чи більшої кількості селекторів — як його аргумент. Такий список не повинен містити псевдоелементів, але будь-які інші прості, складені та складні селектори допускаються.

:where(<складний-список-селекторів>) {
  /* ... */
}

Поблажливий розбір селекторів

Специфікація визначає те, що :is() та :where() приймають поблажливий список селекторів.

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

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

CSS вище все одно правильно розбирається і дає збіг з :valid навіть у браузерах, які не підтримують :unsupported, тоді як:

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

Ігнорується в браузерах, які не підтримують :unsupported, навіть якщо вони підтримують :valid.

Приклади

Порівняння :where() та :is()

Цей приклад показує, як працює :where(), а також ілюструє різницю між :where() та :is().

Погляньмо на такий HTML:

<article>
  <h2>Посилання, оформлені за допомогою :is()</h2>
  <section class="is-styling">
    <p>
      Ось мій головний вміст. Тут <a href="https://mozilla.org">є посилання</a>.
    </p>
  </section>

  <aside class="is-styling">
    <p>
      Це мій побічний вміст. Тут
      <a href="https://developer.mozilla.org">також є посилання</a>.
    </p>
  </aside>

  <footer class="is-styling">
    <p>
      Це мій нижній колонтитул, у якому також є
      <a href="https://github.com/mdn">посилання</a>.
    </p>
  </footer>
</article>

<article>
  <h2>Посилання, оформлені за допомогою :where()</h2>
  <section class="where-styling">
    <p>
      Ось мій головний вміст. Тут <a href="https://mozilla.org">є посилання</a>.
    </p>
  </section>

  <aside class="where-styling">
    <p>
      Це мій побічний вміст. Тут
      <a href="https://developer.mozilla.org">також є посилання</a>.
    </p>
  </aside>

  <footer class="where-styling">
    <p>
      Це мій нижній колонтитул, у якому також є
      <a href="https://github.com/mdn">посилання</a>.
    </p>
  </footer>
</article>

У цьому дещо штучному прикладі є дві статті, кожна з яких містить розділ, побічний вміст і нижній колонтитул. Вони відрізняються класами, які використовуються для позначення дочірніх елементів.

Аби згрупувати вибирання посилань, тим часом зберігаючи відмінні стилі is-styling та where-styling, можна було б скористатися :is() або :where(), наступним чином:

html {
  font-family: sans-serif;
  font-size: 150%;
}

:is(section.is-styling, aside.is-styling, footer.is-styling) a {
  color: red;
}

:where(section.where-styling, aside.where-styling, footer.where-styling) a {
  color: orange;
}

Проте що, якщо пізніше захочеться перевизначити колір посилань у нижніх колонтитулах за допомогою складеного селектора, що складається з селекторів типу низької специфічності?

footer a {
  color: blue;
}

Це не спрацює для червоних посилань, тому що селектори всередині :is() враховуються при розрахунку специфічності загального селектора, а класові селектори мають більшу специфічність, ніж селектори елементів.

Проте селектори всередині :where() мають специфічність 0, тому помаранчеве посилання в нижньому колонтитулі буде перевизначено нашим складеним селектором, що складається лише з типів.

[!NOTE] Також цей приклад можна знайти на GitHub; див. is-where.

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

Сумісність із браузерами

Дивіться також

• :is()
• Список селекторів
• Вебкомпоненти