Когда мы работаем с HTML, между элементами существуют связи «родительски-дочерний«, «соседние элементы», «предок», «потомок». Всем этим связям можно поставить в соответствие CSS-селектор. Один из селекторов — CSS-селектор дочернего элемента. Этот селектор выбирает такие HTML-элементы внутри других, что первые находятся на самом первом уровне вложенности. Другими словами HTML-элементы с большими уровнями вложенности не выбираются.
CSS-селектор дочернего элемента: видеоролик
Пример работы с селектором лежит на codepen. Но можно попробовать прямо тут:
Тут параграф в третьей строке является дочерним элементом контейнера с классом container. Параграф внутри section является дочерним элементом для section, но потомком для блока с классом container. Блок container для дива внутри section является предком. Параграфы, которые идут после заголовка первого уровня являются соседними элементами.