jQuery селектор дочерних элементов

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

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

jQuery синтаксис:

JavaScript

$( "родитель > ребенок" )

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

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

1.0

Селектор в CSS

CSS селектор дочерних элементов.

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

Селектор дочерних элементов — пример 1

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

index.html

HTML

<a href="#">Ссылка внутри тела документа.</a>
<div>
  <a href="#">Ссылка внутри блока.</a>
  <p>Ссылка, <a href="#">внутри</a> абзаца, который находится внутри блока.</p>
  <a href="#">Ссылка внутри блока.</a>
</div>

main.js

JavaScript

$(document).ready(function () {
    $('div > a').css('background-color', 'yellow') // выбирает все элементы <a> дочерние по отношению к <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, мы выбрали все элементы <a>, дочерние по отношению к <div> (его дети) и задали им цвет заднего фона желтый.