jQuery селектор потомков

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

jQuery селектор потомков позволяет выбрать элементы, которые расположены внутри других элементов (содержатся внутри других элементов).

jQuery синтаксис:

JavaScript

$("родитель потомок")
/* в качестве родителя, или потомка может выступать любой селектор */

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

1.0

Селектор в CSS

CSS селектор потомков.

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

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

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

index.html

HTML

<p>Абзац <span>вне</span> блока</p>
<div>
  <p>Абзац, <span>внутри</span> блока</p>
</div>
<p>Абзац <span>вне</span> блока</p>

main.js

JavaScript

$(document).ready(function () {
    $('div p').css('color', 'red') // выбирает все элементы <p>, вложенные в <div> (его потомки)
    $('div p span').css('color', 'green') // выбирает все элементы <span>, вложенные в <p>, которые вложены в <div> (его потомки)
})

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%;
}

В этом примере с использованием селектора потомков jQuery, мы выбрали все элементы <p>, вложенные в <div> (его потомки) и задали им цвет текста красный. Кроме того, мы выбрали все элементы <span>, вложенные в <p>, которые вложены в <div> и задали им зеленый цвет текста.