CSS селектор :has() — батьківський селектор

CSS псевдоклас :has() вибирає елемент, який містить щось, що збігається з аргументом. Це той самий довгоочікуваний батьківський селектор, якого в CSS не було двадцять років.

правити

Загальний опис

Усі звичні селектори читаються згори вниз: «візьми абзац усередині статті». :has() читається навпаки: «візьми статтю, у якій є зображення».

Раніше так було неможливо — доводилось лізти в JavaScript або чіпляти класи на сервері. Тепер картку з бейджем можна стилізувати одним рядком.

Аргументом може бути будь-який селектор, зокрема з комбінаторами: label:has(+ input:invalid) знайде підпис, за яким одразу йде невалідне поле.

правити

Порада

:has() чудово поєднується з :not(): article:not(:has(img)) — статті без зображень.

автор: NagarD правити

Нотатка

Специфічність :has() дорівнює найважчому селектору в дужках, а не нулю (на відміну від :where()).

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

:has(<selector-list>)

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
has	105+	121+	15.4+	91+	105+	-

Підтримка: мобільні переглядачі

Переглядач
has	105+	yes	yes	15.4+

Приклади

+ запропонувати свій приклад у пісочниці

<article class="card">
    <img src="/img/logo.svg" alt="">
    <p>Картка із зображенням</p>
</article>

<article class="card">
    <p>Картка без зображення</p>
</article>

.card:has(img) {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1rem;
}

.card:not(:has(img)) {
    padding: 1rem;
    background: #f4f4f4;
}