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

:is(), :where()

Такие функции-псевдоклассы позволяют более гибко управлять специфичностью.

:is принимает несколько аргументов, и браузер применяет стиль к любому из аргументов, что позволяет избавиться от ненужного кода:

:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

вместо

header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

:where() — принимает несколько аргументов и применяет стиль к любому из них. В отличие от :is() — специфичность у :where() нулевая. У :is() она равна наиболее специфичному из селекторов-аргументов.

:where(header, main, footer) a {
  color: blue;
}

:has()

Данный псевдокласс хоть и является мощным инструментом, но по состоянию на середину 2023 года не поддерживается firefox:

Этот псевдокласс позволяет проверить, есть ли внутри родительского класса какой-либо селектор.

.card:has(.card__image) {
    display: flex;
    align-items: center;
}