Эта статья посвящена пока еще бесполезной информации, а именно - псеводклассу :has, способному в перспективе в корне изменить наш подход к написанию каскадных стилей. Не вызывает никаких сомнений, что появление этого селектора в браузерах разрушит для многих из нас представление о фундаментальных принципах построения модели CSS, так как именно :has станет первым примером использования родительского селектора в CSS.

Обратимся к примеру:

div:has(p) {
  background: red;
}

Как можно заметить из информации, приведенной выше, на момент написания этой статьи данный псевдокласс еще не поддерживатеся никакими браузерами. Тем не менее, всего одна CSS-строка должна изменить цвет фона только для тех div, которые содержат элемент p. То есть, если div не содержит p, данный стиль для него применяться не будет.

Это удивительно и в то же время исколючительно просто, не так ли?

А вот еще один пример:

div:has(+ div) {
  color: blue;
}

Теперь стиль сработает только для тех элементов div, за которыми следует другой div.

Итак, повторим еще раз :has является псевдоклассом родительского селектора. Переводя на язык CSS, можно сказать, что данный псевдокласс “позволяет изменить родительский элемент, содержащий определенный дочерний элемент или содержащий определенный элемент, следующий за ним”. И это пока еще выглядит весьма странно, хотя бы потому, что в умах многих веб-разработчиков ломается ментальная модель CSS, которая пока еще имеет следующий вид:

/* это не валидный CSS, а только иллюстрация */
.parent {
    .child {
        color: red;
    }
}

В каскадных стилях мы только опускаемся от родителя к потомкам и никогда не возвращаемся вверх по дереву. :has полностью меняет эту концепцию, так как ранее родительских селекторов в CSS совершенно не было в связи с весьма весомыми обстоятельствами: браузеры постоянно обрабатывают HTML и CSS, и выбор родителя при определенных условиях приводит к появлению различных проблем, значительно снижающих производительность.

Но, пока отложим эти опасения в сторону, перспективы, появляющиеся вместе с псевдоклассом :has кажутся поистине заманчивыми и пугающими. Открывается настоящий ящик Пандоры невиданных ранее возможностей в CSS.

Допустим, мы хотим применить стили только для ссылок, содержащих картинки:

a:has(img) {
  border: 20px solid white;
}

Такое применение :has было бы полезным. Так же, разумной кажется возможность добавления полей и отступов к элементам в зависимости от их содержимого.

Хотя в настоящее время ;has и не поддерживается никакими браузерами, он входит в спецификацию CSS Selectors Level 4. Данная спецификация (находящаяся в статусе рабочего черновика) содержит ряд очень полезных решений: например, псевдокласс :not, который в отличие от :has имеет довольно приличную поддержку в браузерах и может быть использован уже в настоящее время:

ul li:not(:first-of-type) {
  color: red;
}

Кроме тогда, спецификацию CSS Selectors Level 4 содержит, так же поддерживаемый основными браузерами, селектор :is:

:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
    color: #BADA55;
}
/* ... это то же самое, что и: */
section h1, section h2, section h3, section h4, section h5, section h6,
article h1, article h2, article h3, article h4, article h5, article h6,
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6,
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
    color: #BADA55;
}

На этом пока все: :has пока еще бесполезен, но его кузены :not и :it уже невероятно полезны. И это всего лишь три селектора из рабочего черновика CSS Selectors Level 4.

Спасибо за внимание.

Написано по материалам статьи Robin Rendle “Did You Know About the :has CSS Selector?”.