Контекстные селекторы в CSS используются при наличии вложенных тегов. Их применение позволяет определить стили тега, который вложен в какой-то конкретный тег. Например: текст тега <i> должен быть красным только тогда, когда он находится внутри тега <li>. Рассмотрим пример контекстного селектора в CSS:
<html>
<head>
<title>Контекстные селекторы</title>
<style type="text/css">
LI I {
color: red;
}
</style>
</head>
<body>
<p> <i>Простой курсивный текст</i></p>
<p><li><i>Внутри тега LI текст становится красным</i></li></p>
</body>
</html>
Как видите – курсив стал красным, попав внутрь тега LI. Синтаксис записи наглядно виден – вложенный тег, к которому и применяются стили CSS, пишется через пробел за родительским тегом.
Данное правило контекстных селекторов CSS применяется и для нескольких , последовательно вложенных друг в друга тегов. Рассмотрим предыдущий пример, немного его дополнив:
<html>
<head>
<title>Контекстные селекторы2</title>
<style type="text/css">
LI I {
color: red;
}
DIV P I {
color: green;
}
</style>
</head>
<body>
<i>Простой курсивный текст</i><br>
<li><i>Внутри тега LI текст становится красным</i></li>
<div><p><i>При двух вложенных тегах текст становится зелёным</i></p></div>
</body>
</html>
Как видно из рисунка – тег LI, вложенный в два других тега стал зелёным. Для более гибкой работы с контекстными селекторами в CSS применяют идентификаторы и классы. Рассмотрим конкретный пример использования классов в контексте:
<html>
<head>
<title>Контекстные селекторы3</title>
<style type="text/css">
I {
color: green;
}
.exs P I {
color: red;
}
</style>
</head>
<body>
<i>Зеленый цвет для всех курсивных текстов</i><br>
<p><i>Внутри тега P текст остаётся зелёным</i></p>
<div ><p><i>Применение класса «exs» — текст красный</i></p></div>
</body>
</html>
Как видно из рисунка — применение класса «exs» позволило проще и более адресно придать нужные нам свойства вложенному тексту.
