Что такое :has() в CSS?
:has() — это CSS селектор нового поколения, который называют «parent selector».
Он позволяет выбирать элементы, основываясь на том, что находится внутри них или рядом с ними.
Раньше в CSS мы могли выбирать дочерние элементы (.card img {}), но не могли стилизовать родителя, если у него внутри есть что-то конкретное. :has() решает эту проблему.
Можно использовать как замену JS в некоторых случаях (например, стилизация родителя при активном дочернем).
Синтаксис
element:has(selector) {
/* стили */
}
element— элемент, к которому применяем правило.selector— условие, что должно находиться внутри.
Реальный пример
.article:has(h2, h3) {
padding-top: 2rem;
}
Если в статье есть подзаголовки, добавляем дополнительный отступ.
Синтаксис использования has() с не сколькими условиями
В CSS можно использовать :has() с несколькими условиями — это мощная возможность, которая делает CSS гораздо более “умным” и контекстно-зависимым. Поддержка :has() появилась в большинстве современных браузеров.
Селектор :has() может принимать одно или несколько условий, разделённых запятыми или логическими операторами:
ИЛИ (A, B) — работает как “или”
article:has(h1, h2) { border: 1px solid red; }Применит стиль к <article>, если внутри есть либо h1, либо h2, либо оба.
И (A:has(B):has(C)) — работает как “и”
Чтобы задать несколько условий одновременно, нужно вложить :has() друг в друга:
div:has(h1):has(p) { background: lightgreen; }Применит стиль к <div>, если он содержит и h1, и p.
Сложные условия с вложенностью
section:has(article:has(img)) { outline: 2px dashed blue; }Применит стиль к <section>, если внутри есть <article>, а в нём — <img>.
Комбинирование с псевдоклассами
form:has(input:invalid) { border: 2px solid red; }Применит стиль к <form>, если в ней есть хотя бы один невалидный <input>.
N.B.
Селекторы с :has() могут быть тяжёлыми для производительности, особенно если использовать их на больших страницах. Браузеру приходится просматривать внутренности каждого элемента, чтобы понять, применять ли к нему стиль.