Кратко
Секция статьи "Кратко"Псевдокласс
позволяет выбрать элемент, уточнив основной селектор дополнительным, и при этом не увеличив его «вес». В отличие от привычных селекторов, правило применится только к тому селектору, который был описан до
.
Пример
Секция статьи "Пример"Правила применятся только к такому <dt>
, за которым сразу следует другой элемент <dd>
:
dt:has(+ dd) { /* Стили */}
dt:has(+ dd) { /* Стили */ }
В отличие от соседнего селектора +
(dt + dd
), будет выбран не второй элемент, а первый, т. е.
позволяет буквально инвертировать селектор — правило применится не к последнему селектору, а к тому, который указан перед
.
Как, например, найти такие ссылки, внутри которых есть изображения:
a:has(img) { /* Стили */}
a:has(img) { /* Стили */ }
Как пишется
Секция статьи "Как пишется"selector1:has(selector2) { /* … */}
selector1:has(selector2) { /* … */ }
selector1
— необязательный селектор (если не указан — правило применится ко всем подходящим элементам). Аргумент selector2
в
описывает селектор относительно своей точки отсчёта — selector1
.
Как это понять
Секция статьи "Как это понять"По сути псевдокласс
позволяет уточнить основной селектор дополнительным селектором любой сложности.
Подсказки
Секция статьи "Подсказки"💡 Использование
не влияет на специфичность, т. е. при расчёте веса селектора учитывается только целевой селектор, к которому применяется этот псевдокласс.
На практике
Секция статьи "На практике"🛠 До появления псевдокласса
единственной возможностью управлять проверкой вложенного селектора был JavaScript.