skip to main content

:has

css

Кратко 🔗

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

Этот псевдокласс пока не поддерживается ни в одном браузере, даже за флагом, так что следим за обновлениями и с нетерпением ждём новостей!

Пример 🔗

Правила применятся только к такому <dt>, за которым сразу следует другой элемент <dd>:

dt:has(+ dd) {
/* … */
}

В отличие от соседнего селектора + (dt + dd) будет выбран не второй элемент, а первый, т. е. :has() позволяет буквально инвертировать селектор — правило применится не к последнему селектору, а к тому, который указан перед :has().

Или, например, найти такие ссылки, внутри которых есть изображения:

a:has(img) {
/* … */
}

Как пишется 🔗

selector1:has(selector2) {
/* … */
}

selector1 — необязательный селектор (если не указан — правило применится ко всем подходящим элементам). Аргумент selector2 в :has() описывает селектор относительно своей точки отсчёта — selector1.

Как это понять 🔗

По сути псевдокласс :has() позволяет уточнить основной селектор дополнительным селектором любой сложности.

Подсказки 🔗

💡 Использование :has() не влияет на специфичность, т. е. при рассчёте веса селектора учитывается только целевой селектор, к которому применяется этот псевдокласс.

В работе 🔗

🛠 До появления псевдокласса :has() единственная возможность управлять проверкой вложенного селектора — использовать JavaScript.

Автор: Роман,