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

Комбинатор потомка (>) размещается между двумя селекторами CSS. Он соответствует только тем элементам, которые соответствуют второму селектору и являются прямыми потомками элементов, соответствующих первому.

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

Элементы, соответствующие второму селектору, должны быть непосредственными потомками элементов, соответствующих первому селектору. Это строже, чем комбинатор потомка, который соответствует всем элементам, соответствующим второму селектору, для которых существует родительский элемент, соответствующий первому селектору, независимо от количества «переходов» по DOM.

Синтаксис

/* The white space around the > combinator is optional but recommended. */
selector1 > selector2 { /* style properties */ }

Примеры

CSS

span {
  background-color: aqua;
}

div > span {
  background-color: yellow;
}

HTML

<div>
  <span>
    Span #1, in the div.
    <span>Span #2, in the span that's in the div.</span>
  </span>
</div>
<span>Span #3, not in the div at all.</span>

Результат

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

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

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

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

См. также

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

© 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/Child_combinator