Книга: HTML: Популярный самоучитель

Контекстные селекторы

Контекстные селекторы

Помимо селекторов, связанных с определенными HTML?элементами, стилевыми классами или идентификаторами элементов, можно создавать и более сложные селекторы. Они подходят для случаев, когда стиль должен применяться только к элементам документа, находящимся внутри какого?то другого элемента. Например, средствами CSS можно особым образом оформить элементы LI, находящиеся внутри элемента LO, принадлежащего к различным стилевым классам (пример 10.5).

Пример 10.5. Применение сложных селекторов

<HTML>

<HEAD>

<TITLE>Сложные селекторы</TITLE>

<STYLE type = "text/css">

OL.ordinary_list LI {}

OL.italic_list LI {font-style: italic}

OL.colored_list LI {color: green; background-color: yellow}

</STYLE>

</HEAD>

<BODY>

<P>Список, оформленный обычным шрифтом

<OL class = "ordinary_list">

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

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

</OL>

<P>Список, оформленным курсивным шрифтом

<OL class = "italic_list">

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

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

</OL>

<P>Раскрашенный список

<OL class = "colored_list">

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

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

</OL>

</BODY>

</HTML>

Чтобы применить стиль к каждому отдельному элементу списков, не потребовалось назначать никакие стилевые классы для самих элементов списков. Потребовалось лишь отнести сами списки (элементы OL) к нужным стилевым классам, что избавило нас от лишних усилий при составлении HTML?документа.

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

Кроме того, что показано в примере, можно создать и другие виды контекстных селекторов, например:

P STRONG {color: red} /*применяется к элементам STRONG внутри P*/

.par .colored {color: red} /*применяется к элементам со стилевым классом

"colored", находящимся внутри элементов со стилевым классом "par"*/

Оглавление книги

Оглавление статьи/книги
Похожие страницы

Генерация: 1.358. Запросов К БД/Cache: 3 / 1
поделиться
Вверх Вниз