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

Селектор дочерних элементов выбирает указанные дочерние элементы внутри родительского элемента.

/* Выбор всех элементов <p>, которые являются прямыми
   потомками элемента <div> */
div > p { background-color: yellow; }

Селектор дочерних элементов состоит из трёх частей: первым указывается селектор представляющий родительский элемент, после него указывается комбинатор дочерних элементов ( > ) и затем селектор, определяющий дочерний элемент. Комбинатор определяет взаимосвязь между двумя селекторами, показывая, что будут выбраны все элементы <p>, которые являются прямыми потомками элемента <div>.

Между селектором и комбинатором дочерних элементов допускается ставить пробел. Все селекторы в примере эквивалентны:

div>p { background-color: yellow; }
div> p { background-color: yellow; }
div >p { background-color: yellow; }
div > p { background-color: yellow; }

Можно использовать или опускать пробелы по своему усмотрению.

Пример

div > p { background-color: yellow; }

<div>
  <p>Прямой дочерний элемент.</p>
  
  <article>
    <p>Элемент потомок, не являющийся 
    прямым дочерним элементом.</p>
  </article>
  
  <p>Прямой дочерний элемент.</p>
</div>