Селектор потомков

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

Первый селектор — это селектор потомков. Мы используем его, когда хотим стилизовать элементы, находящиеся внутри другого элемента, даже если они имеют глубокую вложенность. Например, внутри контейнера находятся два абзаца.

<div class="container">
    <p>This is a paragraph inside a div.</p&    <section>
        <p>This is a paragraph inside a section that is inside a div.</p>
    </section>
</div>

Теперь давайте воспользуемся селектором потомков, чтобы стилизовать все параграфы внутри div:

.container p {
    color: blue;
}

Все параграфы внутри div .container станут синими — даже тот, который вложен в элемент section.

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

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

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

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

Задание

Легко

Создайте правило CSS, которое выбирает все элементы списка (<li>), являющиеся потомками элемента с классом "navigation", и изменяет цвет их текста на purple.

Шпаргалка

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

Синтаксис: используйте пробел между родительским селектором и селектором потомка:

.container p {
    color: blue;
}

Это выбирает все элементы <p> внутри любого элемента с классом container, независимо от уровня вложенности.

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

<html>
<head>
    <title>Descendant Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <ul class="navigation">
        <li>Home</li>
        <li>Team
            <ul>
                <li>Players</li>
                <li>Coaches</li>
            </ul>
        </li>
        <li>Tickets</li>
    </ul>
</body>
</html>

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

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