CSS псевдокласс :is() — как и где его использовать

HTML/CSS

11 декабря 20199448

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

Пример использования :is()

Вероятно, можно интуитивно понять что делает :is() просто посмотрев на него. По сути это средство проверки является ли элемент чем-либо. Как if в языках программирования. Посмотрите на примеры ниже, функционально оба этих селектора одинаковы.


CSS
div {
    ...
}

:is(div) {
    ...
}

В обоих случаях стили будут работать, если элемент является div-ом.

Псевдокласс также можно использовать для выбора нескольких элементов в одном объявлении через запятую. Опять же, два селектора в примерах ниже функционально одинаковы.


CSS
ul, li, a {
    ...
}

:is(ul, li, a) {
    ...
}

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


CSS
article h1,
section h1,
aside h1 {
    font-weight: bold;
}

Но используя :is() можно сжать селектор до такого вида:


CSS
:is(article, section, aside) h1 {
    font-weight: bold;
}

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


CSS
article h1, article h2, article h3, article h4, article h5, article h6,
section h1, section h2, section h3, section h4, section h5, section h6,
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, {
    font-weight: bold;
}

А с псевдоклассом достаточно будет вот этого:


CSS
:is(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
    font-weight: bold;
}

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

В CSS есть псевдокласс :not(), который работает обратным образом. Он позволяет применить стили ко всему, кроме набора селекторов.

Ранее мы выбрали с помощью :is() все дочерние заголовки тегов article, section и aside. А с помощью :not() мы сможем выбрать все заголовки, которые не являются потомками этих элементов:


CSS
:not(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
    font-weight: normal;
}

Конструкция из псевдоклассов :is() и :not() выглядит логичной и интуитивно понятной.

Поддержка браузерами

В данный момент псевдокласс уже имеет поддержку большинства браузеров.

Для обеспечения кроссбраузерности вы можете использовать :any() и :matches() как фоллбеки для :is(). Например:


CSS
:-webkit-any(article, section, aside) h1 {
    font-weight: bold;
}

:-moz-any(article, section, aside) h1 {
    font-weight: bold;
}

:matches(article, section, aside) h1 {
    font-weight: bold;
}

:is(article, section, aside) h1 {
    font-weight: bold;
}

В заключении

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