`:has()`

Уникальный селектор, позволяющий стилизовать родителя при наличии конкретного ребёнка.

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

Кратко

Скопировано

Функция-псевдокласс :has()позволяет уточнить основной селектор дополнительным. Это единственный способ выбрать элемент на основе дочернего или соседнего элемента посредством CSS.

Пример

Скопировано

Применяем стили ко всем ссылкам, которые содержат изображения:

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

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

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

Как пишется

Скопировано

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

        
          
          selector1:has(selector2) {  /* Стили */}
          selector1:has(selector2) {
  /* Стили */
}

Если .class — валидный селектор, а #top — нет, то selector будет уточнён за счёт .class:

        
          
          selector:has(.class, #top) {  /* Стили */}
          selector:has(.class, #top) {
  /* Стили */
}

Как понять

Скопировано

Функция-псевдокласс :has() принимает один или несколько селекторов любой сложности в качестве аргумента. В отличие от :is() и :where() правило применится только к тому селектору, который был описан до :has()

Подсказки

Скопировано

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

💡 Переданные через запятую селекторы selector1:has(selector2, selector3) браузер проверяет аналогично: selector2 или selector3. Допустим, что в примере ниже оба переданных в :has() селектора являются действительными. Тогда selector будет уточнён за счёт #link, так как вес #link больше веса .content:

        
          
          selector:has(.content, #link) {  /* Стили */}
          selector:has(.content, #link) {
  /* Стили */
}

💡 Есть возможность соединять селекторы. Такую запись браузер интерпретирует аналогично: selector2 и selector3. В случае валидности селекторов selector2 и selector3, браузер применит стили к selector1:

        
          
          selector1:has(selector2):has(selector3) {  /* Стили */}
          selector1:has(selector2):has(selector3) {
  /* Стили */
}

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

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

На практике

Скопировано

Саша Патлух советует

Скопировано

🛠 Бывает, что контент какого-то блока вашей HTML-страницы генерируется из Markdown-разметки. Это особенно часто встречается на сайтах, созданных при помощи генераторов сайтов вроде 11ty. Вы не можете добавить в сгенерированный HTML-код классы, идентификаторы или дата-атрибуты. Псевдокласс :has() может решить достаточно сложную ситуацию с непредвиденным появлением обёрток вокруг элементов.

Вот типовой кусок разметки Markdown:

        
          
          ## Цитаты Далай ЛамыЛюди были созданы для того, чтобы их любили,а вещи были созданы для того, чтобы ими пользовались.Мир в хаосе, потому что все наоборот.![Фото Далай Ламы](https://yoursite.com/dalai-lama.jpg)Принимая решение, спрашивайте себя: «А сделает ли это меня счастливым?»Задавая этот вопрос всякий раз перед принятием решения,мы перемещаем своё внимание с того, в чём мы себе отказываем,на то, к чему мы стремимся.Далай Лама
          ## Цитаты Далай Ламы

Люди были созданы для того, чтобы их любили,
а вещи были созданы для того, чтобы ими пользовались.
Мир в хаосе, потому что все наоборот.

![Фото Далай Ламы](https://yoursite.com/dalai-lama.jpg)

Принимая решение, спрашивайте себя: «А сделает ли это меня счастливым?»
Задавая этот вопрос всякий раз перед принятием решения,
мы перемещаем своё внимание с того, в чём мы себе отказываем,
на то, к чему мы стремимся.

Далай Лама

Эта разметка превратится в такой HTML (я поместил его внутрь секции — это похоже на реальное использование):

        
          
          <section class="content">  <h2>Цитаты Далай Ламы</h2>  <p>    Люди были созданы для того, чтобы их любили,    а вещи были созданы для того, чтобы ими пользовались.    Мир в хаосе, потому что все наоборот.  </p>  <p>    <img      src="https://yoursite.com/dalai-lama.jpg"      alt="Фото Далай Ламы"    >  </p>  <p>    Принимая решение, спрашивайте себя: «А сделает ли это меня счастливым?»    Задавая этот вопрос всякий раз перед принятием решения,    мы перемещаем своё внимание с того, в чём мы себе отказываем,    на то, к чему мы стремимся.  </p>  <p>Далай Лама</p></section>
          <section class="content">
  <h2>Цитаты Далай Ламы</h2>
  <p>
    Люди были созданы для того, чтобы их любили,
    а вещи были созданы для того, чтобы ими пользовались.
    Мир в хаосе, потому что все наоборот.
  </p>
  <p>
    <img
      src="https://yoursite.com/dalai-lama.jpg"
      alt="Фото Далай Ламы"
    >
  </p>
  <p>
    Принимая решение, спрашивайте себя: «А сделает ли это меня счастливым?»
    Задавая этот вопрос всякий раз перед принятием решения,
    мы перемещаем своё внимание с того, в чём мы себе отказываем,
    на то, к чему мы стремимся.
  </p>
  <p>Далай Лама</p>
</section>

Изображение обёрнуто в абзац, это неудобно, но так работает конвертер. Это усложняет стилизацию. Например, мы хотим поставить изображение справа от первого абзаца, а остальные абзацы не трогать. Псевдокласс :has() — помощник в таких случаях.

Выбираем абзац, следом за которым сразу идёт другой абзац с вложенным изображением:

        
          
          .content p:has(+ p > img) {  display: inline-block;  vertical-align: top;}
          .content p:has(+ p > img) {
  display: inline-block;
  vertical-align: top;
}

Если знаки + и > в селекторах вызывают недоумение, то почитайте статью о комбинированных селекторах.

Теперь выберем абзац с вложенным изображением:

        
          
          .content p:has(img) {  display: inline-block;  vertical-align: top;  width: 300px;}
          .content p:has(img) {
  display: inline-block;
  vertical-align: top;
  width: 300px;
}

Подгоним изображение под ширину родителя:

        
          
          .content img {  width: 100%;}
          .content img {
  width: 100%;
}

Realetive советует

Скопировано

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

Кратко

Пример

Как пишется

Как понять

Подсказки

На практике

Саша Патлух советует

Realetive советует

Читайте также

Псевдоклассы

Специфичность

Комбинированные селекторы