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

Контекстные селекторы в 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.

2023-11-18 00:35 Самоучитель по CSS