Комбинатор потомка

Комбинатор потомка — обычно обозначаемый одним пробелом (« ») — объединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если у них есть элемент-предок (родитель, родитель родителя, родитель родителя родителя и т. д.), соответствующий первому селектору. Селекторы, использующие комбинатор потомка, называются селекторами потомков.

/* List items that are descendants of the "my-things" list */
ul.my-things li {
  margin: 2em;
}

Технически комбинатор потомка — это один или несколько пробельных символов CSS: пробел и/или один из четырёх управляющих символов — возврат каретки, перевод формата, перевод строки и табуляция — между двумя селекторами при отсутствии другого комбинатора. Кроме того, пробельные символы, из которых состоит комбинатор, могут содержать любое количество комментариев CSS.

Синтаксис

selector1 selector2 {
  /* property declarations */
}

Примеры

CSS

li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}

HTML

<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>

Результат

Спецификации

Совместимость с браузерами

См. также

• Комбинатор дочернего элемента