| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 4.0 + | 7.0 + | 1.0 + | 3.5 + | 1.0 + | 1.0 + | 1.0 + | 1.0 + |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
При створенні веб-сторінки часто доводиться вкладати одні теги всередину інших. Щоб стилі для цих тегів використовувалися коректно, допоможуть вкладені селектори. Наприклад, поставити стиль для тега <b> тільки коли він розташовується всередині контейнера <p> . Таким чином можна одночасно встановити стиль для окремого тега, а також для тега, який знаходиться всередині іншого.
Синтаксис
EF {Опис правил стилю}
Тут E це батьківський тег, а F — дочірній тег, розташований в контейнері <E> . В цьому випадку стиль буде застосовуватися до тегу <F> , коли дотримується наступний код <E> <F> </F> </E> . Не обов'язково повинно бути два тега, допускається довільний рівень вкладення. При цьому конструкція може записуватися так: div div ul li {...} .
Приклад
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
селектори </title>
<style>
pb {font-family: Times, serif; /* Сімейство шрифту */ font-weight: bold; /* Жирне накреслення */ color: navy; /* Синій колір тексту */ } </style>
</head>
<body>
<div>
<b>
Жирне накреслення тексту </b>
</div>
<p>
<b>
Одночасно жирне накреслення тексту і виділене кольором </b>
</p>
</body>
</html>
В даному прикладі показано звичайне застосування тега <b> і цього ж тега, коли він вкладений всередину абзацу <p> .
Браузери
У браузері Internet Explorer версії 6 і нижче не працює комбінація контекстних селекторів і псевдокласу : hover . Наприклад, стиль для селекторів p b: hover або a: hover span застосовуватися не буде.