Селектор потомков (CSS Selector)

Описание

Селектор потомков соответствует всем элементам, которые являются потомками указанного элемента. Первый простой селектор в этом селекторе представляет элемент-предок — структурно превосходящий элемент, такой как родительский элемент или родительский элемент родительского элемента и т. Д. Второй простой селектор представляет элемент-потомок, который мы пытаемся сопоставить.

Комбинатор, который мы используем в селекторе-потомке, является символом пробела: пробел, горизонтальная табуляция, возврат каретки, перевод строки или перевод формы. Поскольку пробельные символы разрешены во всех комбинаторах, вы можете включить более одного пробельного символа между простыми селекторами в селекторе-потомке.

Рассмотрим следующий фрагмент HTML:

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

Мы попытаемся сопоставить элементы в приведенном выше фрагменте, используя селектор ниже:

ul li { ⋮ declarations } 

Этот селектор потомков будет соответствовать всем четырем элементам li в примере HTML, потому что каждый из этих элементов имеет элемент ul качестве предка.

Мы также можем использовать селекторы-потомки для сопоставления элементов li внутри ol в примере выше:

 ul * li { ⋮ declarations } ul * * li { ⋮ declarations } ul * ol li { ⋮ declarations } ul li * li { ⋮ declarations } ul ol li { ⋮ declarations } ul li li { ⋮ declarations } ul li ol li { ⋮ declarations } 

Однако мы не можем использовать селекторы-потомки для сопоставления только элементов списка в неупорядоченном списке. Для этого нам понадобится дочерний селектор.

пример

Взгляните на этот пример
селектор потомков в действии:

 ul li { ⋮ declarations } 

Этот селектор сопоставляет все элементы li которые являются потомками элемента ul то есть каждый элемент li , у которого в качестве предка есть элемент ul .