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

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

Здравствуйте! Продолжаем изучение css селекторов и на очереди селекторы потомков.

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

 

Например, пусть элемент body на веб-странице имеет следующее содержимое:

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

  Внутри элемента body определено три вложенных элемента: h2, div, p. Все эти элемены являются потомками элемента body. А внутри элемента div определен только один вложенный элемент - p, поэтому элемент div имеет только одного потомка. Используя специальные селекторы, мы можем стилизовать вложенные элементы или потомков внутри строго определенных элементов. Например, у нас на странице могут быть параграфы внутри блока с основным содержимым и внутри блока футера. Но для параграфов внутри блока основного содержимого мы захотим установить один шрифт, а для параграфов футера другой.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы CSS</title>
        <style>
            #main p{
                font-size: 16px;
            }
            #footer p{
                font-size: 13px;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <p>Первый абзац</p>
            <p>Второй абзац</p>
        </div>
        <div id="footer">
            <p>Текст футера</p>
        </div>
    </body>
</html>

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

 

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

#main p{
    font-size: 16px;
}

То есть данный стиль будет применяться только к тем элементам p, которые находятся внутри элемента с идентификатором main.

Рассмотрим другой пример:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы CSS</title>
        <style>
            li .redLink{
                color: red;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>Самсунг: <a class="redLink">Galaxy S7 Edge</a></li>
            <li>Apple: <a>iPhome SE</a></li>
            <li>LG: <a class="redLink">LG G5</a></li>
            <li>Microsoft: <a>Lumia 650</a></li>
        </ul>
    </body>
</html>

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

Но обратите внимание на пробел: li .redLink. Данный пробел играет большое значение и указывает как раз, что элементы с классом redLink должны быть вложенными по отношению к элементу <li>

Но если мы уберем пробел:

li.redLink{
    color: red;
}

то смысл селектора изменится. Теперь будет подразумеваться, что стиль применяется к элементам <li>, которые имеют класс redLink. Например, к следующему элементу:

<li class="redLink">Microsoft: <a>Lumia 650</a></li>

Но никак не к элементу:

<li>LG: <a class="redLink">LG G5</a></li>

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

TemplateMonster

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

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

tezeks

Google+