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

контекстные селекторы

Как видите – курсив стал красным, попав внутрь тега 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» позволило проще и более адресно придать нужные нам свойства вложенному тексту.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha