Дочерний комбинатор

Дочерний комбинатор (>) помещается между двумя 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>

Результат

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

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

См. также

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