Дочерний элемент

HTML-документ устроен как дерево: html содержит head и body, body — шапку, основную часть и подвал, и так далее вглубь. Отношения в этом дереве описывают семейными словами. Ребёнок вложен в родительский элемент напрямую, без промежуточных уровней. Всё, что лежит глубже, — дети детей — называют потомками. Элементы с общим родителем — соседние.

<ul class="menu">              ← родитель
  <li>                         ← дочерний элемент ul
    <a href="/">Главная</a>    ← дочерний для li, потомок для ul
  </li>
</ul>

Выбор дочерних в CSS

• .menu > li — комбинатор > выбирает только прямых детей. Пробел (.menu li) захватил бы и пункты вложенных подменю.
• li:first-child, li:last-child, li:nth-child(2n) — по позиции среди соседей.
• :only-child — элемент, у которого соседей нет.
• .card:has(> img) — обратное направление: родитель, у которого есть прямой дочерний img.

Частая ошибка с :nth-child: счёт идёт среди всех детей родителя, а не только среди элементов указанного тега. Если первым стоит заголовок, то p:first-child не выберет ни один абзац. Для подсчёта по тегу есть :first-of-type и :nth-of-type().

Дети в JavaScript и в раскладке

Свойство element.children возвращает только дочерние элементы, а element.childNodes — все дочерние узлы DOM, включая текст и переводы строк между тегами. Новых детей добавляют методами append() и prepend(), а родителя находят через parentElement.

Отношение «родитель — ребёнок» важно и для вёрстки: свойства flexbox и grid, заданные контейнеру, действуют только на его прямых детей. Лишний div-обёртка вокруг пунктов меню — типичная причина, по которой display: flex на списке будто бы не работает: выстраивается в ряд одна обёртка, а не пункты внутри неё.