Child Selector (CSS-селектор)

Описание

Этот селектор сопоставляет все элементы, которые являются непосредственными дочерними элементами указанного элемента. Комбинатор в дочернем селекторе — знак «больше» (>). Он может быть окружен пробельными символами, но если это так, Internet Explorer 5 в Windows будет некорректно воспринимать его как селектор потомков. Так что лучшая практика — избегать пробелов вокруг этого комбинатора.

Рассмотрим этот фрагмент HTML:

  <UL>
   <li> Пункт 1 </ li>
   <Li>
     <Ол>
       <li> Подпункт 2A </ li>
       <li> Подпункт 2B </ li>
     </ Ол>
   </ Li>
 </ UL> 

Давайте попробуем сопоставить элементы в приведенном выше фрагменте с селектором ниже:

ul>li {
  ⋮ declarations
}

Дочерний селектор выше будет соответствовать только двум элементам li, которые являются дочерними элементами элемента ul. Это не будет соответствовать подэлементам, потому что их родителем является элемент ol.

пример

Вот пример дочернего селектора на работе:

 ul>li {
  ⋮ declarations
}

Этот селектор соответствует всем элементам liulliul