Дочерний селектор

Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 3 из 43.

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

Например:

<div class="parent">
  <p>This is a direct child</p>
  <section>
    <p>This is a grandchild (not a direct child)</p>
  </section>
</div>

Применить стили только к прямым потомкам:

.parent > p {
  color: red;
}

После применения этого CSS только первый абзац "This is a direct child" будет красным. Второй абзац не будет затронут, так как он не является прямым дочерним элементом div с классом "parent".

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Задание

Легко

У вас есть .team-container, который содержит несколько разделов команд. Ваша задача:

Используйте дочерний селектор, чтобы стилизовать прямые дочерние div внутри .team-container, задав им фон light blue, padding 10px и margin 5px.
Используйте дочерний селектор, чтобы стилизовать прямые элементы <h3> внутри div .team, задав им цвет green и размер шрифта 20px.

Шпаргалка

Дочерний селектор (>) выбирает только прямых потомков элемента, а не более глубокие вложения.

Синтаксис:

parent > child {
  /* стили */
}

Пример:

<div class="parent">
  <p>Direct child - will be styled</p>
  <section>
    <p>Grandchild - won't be styled</p>
  </section>
</div>

.parent > p {
  color: red;
}

Только первый абзац будет красным, потому что он является прямым потомком .parent.

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

<html>
<head>
    <title>Child Selector</title>
    <style>
       /* Write CSS rules here */
       
    </style>
</head>
<body>
    <div class="team-container">
        <div class="team">
            <h3>Basketball Team</h3>
            <ul>
                <li>LeBron James</li>
                <li>Stephen Curry</li>
                <li>Kevin Durant</li>
            </ul>
        </div>
        <div class="team">
            <h3>Football Team</h3>
            <ul>
                <li>Tom Brady</li>
                <li>Patrick Mahomes</li>
                <li>Davante Adams</li>
            </ul>
        </div>
        <div class="team">
            <h3>Soccer Team</h3>
            <ul>
                <li>Lionel Messi</li>
                <li>Cristiano Ronaldo</li>
                <li>Neymar Jr.</li>
            </ul>
        </div>
    </div>
</body>
</html>

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.