Помимо селекторов, связанных с определенными 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"*/