Контекстные селекторы
При создании веб-страницы часто приходится вкладывать одни теги
в другие. Чтобы стили для этих тегов использовались корректно, помогут
селекторы, которые работают только в определенном контексте. Например,
можно определить стиль для жирного текста, только когда он еще и
курсивный.
Обычное использование селекторов.
B { font-family: Arial; font-weight: bold; color: navy; }
I { font-style: italic; }
Контекстный селектор состоит из простых селекторов разделенных
пробелом.
B I { font-family: Arial; font-weight: bold; color: navy;
font-style: italic; }
В примере жирный курсивный шрифт Arial синего цвета будет применен
к тегу I, когда он находится внутри тега
B.
Пример. Контекстные селекторы
<html>
<head>
<style type="text/css">
B { font-weight: bold; }
I { font-style: italic; }
B I { font-family: Arial;
font-weight: bold; color: navy; font-style: italic; }
</style>
</head>
<body>
<b>Жирный шрифт</b><br>
<i>Курсивный текст</i><br>
<b><i>Жирный
курсивный текст</i></b><br>
<i><b>Курсивный и жирный текст</b></i>
</body>
</html>
|
Жирный шрифт
Курсивный текст
Жирный курсивный текст
Курсивный и жирный текст
|
Можно одновременно использовать сгруппированные и контекстные селекторы.
B I, H1, P .cite { color: navy; }
В примере синий цвет будет применен:
к тегу курсива I размещенному внутри
тега B;
ко всем тегам H1;
к классу cite находящемуся внутри
тега параграфа P.