Расширенные CSS селекторы

Расширенные CSS-селекторы

Х+Y

1 ul + p { color: red; } Выделяет последующий элемент. Он будет выбирать только элемент типа Y, который идет сразу после элемента Х. В примере текст первого абзаца после каждого ul будет красного цвета.

Х>Y

1 div#container > ul { border: 1px solid black; } Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый CSS-селектор будет выбирать только непосредственные дочерние элементы. Например, рассмотрим следующий код.

<div id="container">

    <ul>

        <li> Элемент списка
            <ul>
                <li> Дочерний элемент</li>
            </ul>
        </li>

        <li> Элемент списка </li>

        <li> Элемент списка </li>

        <li> Элемент списка </li>

    </ul>

</div>

CSS-селектор #container > ul выберет только ul-ы, которые являются непосредственными дочерними элементами div с id =container . Он не выберет, например, ul-ы, являющиеся дочерними элементами первых li .

Х ~ Y

1 ul ~ p { color: red; } Этот CSS-селектор очень похож на X + Y, однако, является менее строгим. При использовании ul + p будет выбрать только первый элемент, идущий за Х. В данном случае будут выбраны все элементы p, идущие за ul.

ДЗ. Есть три цветных блока и серый блок. При наведении на цветной блок, серый окрашивается в этот же цвет.