`:has`

Время чтения: меньше 5 мин

Кратко

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

Пример

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

        
          
          dt:has(+ dd) {  /* Стили */}
          dt:has(+ dd) {
  /* Стили */
}

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

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

        
          
          a:has(img) {  /* Стили */}
          a:has(img) {
  /* Стили */
}

Как пишется

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

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

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

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

Подсказки

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

На практике

Realetive

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