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

Контекстные селекторы в CSS используются при наличии вложенных тегов. Их применение позволяет определить стили тега, который вложен в какой-то конкретный тег. Схема контекстного селектора выглядит следующим образом:

селектор селектор {
 css-свойства: значения;
}

Например: текст тега <i> должен быть красным только тогда, когда он находится внутри тега <li>. Рассмотрим пример контекстного селектора в CSS:

<html>
<head>
<title>Контекстные селекторы</title>
<style type="text/css">
LI I {
   color: green;
}
</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.

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

CSS-фреймворки созданы для упрощения работы верстальщика, исключения ошибок при создании проекта и избавления от скучного монотонного написания одного и того же кода. Верстальщики получают продуманные

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: