Селекторы элементов одного уровня

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

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

 

Например:

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

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

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

Чтобы стилизовать первый смежный элемент по отношению к определенному элементу, используется знак плюса +:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            h2+div { color: red; }
        </style>
    </head>
    <body>
        <h2>Заголовок</h2>
        <div>
            <p>Текст первого блока</p>
        </div>
        <div>
            <p>Текст второго блока</p>
        </div>
    </body>
</html>

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

Селектор h2+div позволяет определить стиль (в данном случае красный цвет текста) для блока div, который идет непосредственно после заголовка h2

Причем этот селектор будет стилизовать блок div, если он будет идти непосредственно после заголовка. Если же между заголовком и блоков div будет находиться еще какой-либо элемент, например:

<h2>Заголовок</h2>
<p>Элемент между заголовком и блоком div</p>
<div>
    <p>Текст первого блока</p>
</div>

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

Если нам надо стилизовать вообще все смежные элементы одного уровня, неважно непосредственно идут они после определенного элемента или нет, то в этом случае вместо знака плюса необходимо использовать знак тильды "~":

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

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

Прочитано 541 раз Последнее изменение Суббота, 21 мая 2016 13:48
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

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

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

tezeks

Google+