Контекстные селекторы в CSS используются при наличии вложенных тегов. Их применение позволяет определить стили тега, который вложен в какой-то конкретный тег. Схема контекстного селектора выглядит следующим образом:
селектор селектор {
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>Контекстные селекторы, могут состоять более чем из 2х тегов (селекторов), например если надо назначить CSS-свойство элементу strong, находящемуся в стандартной ячейке таблицы, а остальные теги strong не трогать (например находящиеся в абзацах p), то CSS-код может выглядеть следующим образом:
table tr td strong {
css-свойства: значения;
}Более широкие возможности контекстные селекторы дают при использовании идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента, который располагается внутри определённого класса. Рассмотрим пример:
<html>
<head>
<meta charset="utf-8">
<title>Контекстные селекторы</title>
<style>
A {
color: black; /* Черный цвет текста для всех ссылок */
}
.menu {
padding: 7px; /* Поля вокруг текста */
border: 1px solid #333; /* Параметры рамки */
}
.menu A {
color: navy; /* Темно-синий цвет ссылок */
}
</style>
</head>
<body>
<div class="menu">
<a href="https://it-black.ru/1.html">Меню 1</a> |
<a href="https://it-black.ru/2.html">Меню 2</a> |
<a href="https://it-black.ru/3.html">Меню 3</a>
</div>
<p><a href="https://it-black.ru/text.html">Другие материалы...</a></p>
</body>
</html>В данном примере используется два типа ссылок. Первая ссылка, стиль которой задаётся с помощью селектора A, будет действовать на всей странице, а стиль второй ссылки (.menu A) применяется только к ссылкам внутри элемента с классом menu.