CSS селектор дочерних элементов

Значение и применение

Селектор дочерних элементов позволяет форматировать элементы, вложенные внутрь других элементов (выбирает все дочерние элементы внутри элемента родителя).

Элемент, подчиненный другому элементу более высокого уровня, является дочерним. На изображении ниже оба элемента <h2> и <p> являются дочерними по отношению к <body>, но элемент <i> при этом не является дочерним для элемента <body>, так как он расположен внутри тега <p>, и является дочерним именно для него.

Дочерние элементы в HTML документе.
Дочерние элементы в HTML документе.

Попробуйте селектор A > B

Сравните прямых детей и всех потомков: вложенный абзац подходит только второму варианту.

Совпадения отмечены оранжевым фоном и обводкой.

HTML примера
HTML
<section class="card">
  <h3 id="title">Заголовок карточки</h3>
  <p class="note">Первый абзац — .note</p>
  <div class="nested">
    <p>Вложенный абзац <span class="note">и span.note</span></p>
  </div>
  <p>Второй абзац карточки</p>
  <p class="note">Третий абзац — .note</p>
</section>

Поддержка браузерами

Спецификация: selectors

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьcss.selectors.child
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
child✓1✓12✓1✓4✓1✓18✓4✓10.1✓1✓1.0✓4.4✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
element > element {
блок объявлений;
}

Версия CSS

CSS2

Примеры, попробуйте сами

Выбор элементов: .scene > p

Выделяется только непосредственный дочерний абзац. Уберите >: правило затронет и вложенный абзац.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #24364b;
    overflow-wrap: anywhere;
}
section {
    margin-block: 16px;
    padding: 12px;
    border: 1px solid #a8b8c7;
}
p {
    padding: 8px;
}
label {
    display: block;
    margin-block: 12px;
}
input,
button {
    max-width: 100%;
    font: inherit;
    padding: 8px;
}
input[type='checkbox'] + label {
    display: inline;
}
a {
    color: #135fb5;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Выбор элементов: .scene > p</title>
  </head>
  <body>
    <section class="scene">
      <p>Прямой потомок</p>
      <div><p>Вложенный абзац</p></div>
    </section>
    <p>Абзац вне контейнера</p>
  </body>
</html>
style.css
CSS
/* Измените селектор и сравните выделенные элементы. */
.scene > p {
    background-color: #ffe29a;
    color: #593600;
    outline: 2px solid #b46a00;
}