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

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

/* 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>

Результат

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

Спецификация
Уровень 4 селекторов # descendant-combinators

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`Descendant_combinator`	1	12	1	3.5	1	18	4	10.1	1	1.0	4.4

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator