jQuery селектор :has

Определение и применение

jQuery селектор :has выбирает все элементы, которые имеют один или более элемент, содержащийся внутри них. Вложенные элементы могут находиться как в качестве дочернего элемента, так и потомка.

jQuery синтаксис:

$(":has(selector)")

// Для выбора элемента, который имеет в себе любой из перечисленных элементов:
$(":has(selector, selector)")

Добавлен в версии jQuery

Селектор в CSS

В современном CSS существует :has(). Здесь рассматривается реализация jQuery 4.0.0: она выполняет поиск подходящих потомков. Поддержку полного современного синтаксиса CSS :has() в этой версии предполагать нельзя.

Пример использования

Селектор :has — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<div>
  <p><i>Блок, в котором содержится абзац с курсивным текстом</i></p>
</div>
<div>
  <p>Блок, в котором содержится абзац c элементом<span>span</span>.</p>
</div>

main.js

JavaScript

$(document).ready(function () {
    $('div:has(i, span)').css('background-color', 'yellow') // выбираем элементы div, которые содержат в себе элементы i, или span
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием селектора :has мы выбрали и стилизовали блоки (элементы <div>), которые содержат в себе элементы <i>, или <span>. В нашем случае было стилизовано оба блока, так как первый содержит в себе элемент <i>, а второй блок элемент <span>.