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

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

Вот пример того, как вы можете использовать псевдокласс :is():

:is(h1, h2, h3) {
    color: red;
}

/* Без использования :is() */
h1, h2, h3 {
    color: red;
}

В обоих случаях CSS выберет все элементы h1, h2 и h3 и применит к ним красный цвет текста.

Возможно, на первый взгляд псевдокласс :is() может показаться не особо полезным, вызывая лишь дополнительные сложности с синтаксисом. Однако, он становится полезнее, когда необходимо выбрать дочерние элементы. Представьте, что вы хотите, чтобы все заголовки на странице были написаны жирным шрифтом, но только в том случае, если они являются дочерними элементами тега article. С использованием псевдокласса :is() вы можете легко написать компактное и читаемое правило CSS, которое применится только к нужным элементам, избегая применения стилей к другим заголовкам на странице.

/* Без использования :is() */
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
    font-weight: bold;
}

/* Воспользуемся псевдоклассом :is() */
article :is(h1, h2, h3, h4, h5, h6) {
    font-weight: bold;
}

А если требуется выбрать дочерние элементы в разных тегах, например все заголовки внутри section и article то можно написать так:

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

Вы также можете использовать псевдокласс :is() в сочетании с другими селекторами. Например вам необходимо выбрать параграф который идет непосредственно после заголовков и сделать ему шрифт 18px:

/* Без использования :is() */
h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
    font-size: 18px;
}

/* Воспользуемся псевдоклассом :is() */
:is(h1, h2, h3, h4, h5, h6) + p {
    font-size: 18px;
}

Рассмотрим еще один пример, в котором тегу input нужно прописать состояния :hover и :focus

input:is(:hover, :focus) {
    outline: 1px solid blue;
}

/* Без использования :is() */
input:hover,
input:focus {
    outline: 1px solid blue;
}

:is() и псевдоэлементы

Псевдокласс :is() не поддерживает псевдоэлементы, вы можете передавать в него селекторы разных типов в качестве аргументов за исключением псевдоэлементов!

Например так уже не получится сделать:

/* Так делать нельзя! */
.element:is(::after, ::before) {
    display: block;
}

Вместо этого используйте:

.element::before,
.element::after {
    display: block;
}

В заключение

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

Совместимость с браузерами