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

Оцените материал
(0 голосов)

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

<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;
}

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

Прочитано 617 раз Последнее изменение Четверг, 30 июня 2016 14:46
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+