Как создать сайт

Селекторы дочерних элементов

Здравствуйте! На прошлом уроке мы рассмотрели селекторы потомков  сейчас разберем селекторы дочерних элементов. Они отличаются от селекторов потомков тем, что позволяют выбрать элементы только первого уровня вложенности. Например:

<body>
    <h2>Заголовок</h2>
    <div>
        <p>Текст</p>
    </div>
</body>

Седекторы дочерних элементов

Хотя вложенными в элемент body элементами являются целых три — h2, div, p, но дочерними из них являются только два — div и h2, так как они находятся в первом уровне вложенности. А элемент p находится на втором уровне вложенности, так как вложен внутрь элемента div, а не просто элемента body.

Для обращения к дочерним элементам используется знак угловой скобки:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы атрибутов в CSS3</title>
        <style>
            .article > p{
             
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="article">
            <p>Аннотация к статье</p>
            <div class="content">
                <p>Текст статьи</p>
            </div>
        </div>
    </body>
</html>

Просмотреть  пример

В блоке с классом article есть два параграфа. Селектор .article > p выбирает только те параграфы, который находятся непосредственно в блоке article:

Если бы мы использовали другой селектор без символа >

.article p{
             
    color: red;
}

Тогда стиль бы применялся ко всем параграфам на всех уровнях вложенности.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Читайте также  Наследование стилей
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Оставить ответ

24 + = 31

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: