90. Структура документа: родитель-потомок в CSS

Рассмотрим пример первый.

Пример 1

<!DOCTYPE html>
<html>
    <head>
        <title>codebra</title>
    </head>
    <body>
        <ol>
            <li>1</li>
            <li>2</li>
        </ol>
    </body>
</html>

HTML документы строятся на иерархии элементов. Каждый элемент является родителем или потомком, или и тем, и другим. Например, элемент body является родителем для элемента ol. А элемент ol является родителем для элементов li. body является дочерним элементу html и так далее.

Родителем и потомком называют те элементы, разница между которыми один уровень. Если разница между элементами несколько уровней, например, body и li, то такие элементы называют предок (body) и потомок (li).

Родители и потомки из первого примера

И теперь давайте посмотрим реальный пример.

Пример 2

<p>
    <span>спан в абзаце</span>
</p>
<h1>
    <span>спан в заголовке</span>
</h1>

Теперь первый span (родитель p) сделаем красного цвета. Второй span (родитель h1) сделаем зеленого цвета. Это реализовано в третьем примере.

Пример 3

p span {
    color: red;
}
h1 span {
    color: green;
}

Рассмотрим четвертый пример.

Пример 4

<p>
    <b>
        <span>жирный спан в абзаце</span>
    </b>
</p>

То есть можно и больше двух селекторов использовать.

Пример 5

p b span {
    color: red;
}

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

Свойство background для работы с фономЦвета и фон

Свойство z-index для определения уровня элементаПозиционирование

Обработка исключений (try/except) в PythonЗнакомство с Python

Поиск хостов с помощью NmapРазведка и сканирование

Написание модулей в PythonЗнакомство с Python

Структура документа: сестринские элементы в CSSСелекторы в CSS

Знакомимся с Flexbox в CSSЗнакомство с Flexbox

Типы данных в PythonЗнакомство с Python

Введение в раздел «Структуры данных в Python»Знакомство с Python

Предыдущий урок «89. Селекторы атрибутов: по конкретному атрибуту» Следующий урок «91. Структура документа: дочерние элементы в CSS»

HTML

CSS

Браузер

Вернуть расположение блоков

Код HTML

Код CSS

Браузер×

Задание

Восстановить код

Чтобы использовать все функции сайта (например: сохранение прогресса прохождения уроков, участие в рейтинге среди пользователей, прохождение тестов, просмотр внешних ссылок и скриншотов в некоторых курсах), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.

Сделайте цвет текста спан 2 красного цвета. HTML код менять нельзя. Используйте теорию из этого урока.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.

Необходимо авторизоваться, чтобы проверить задание
Это займет не больше минуты.