# Контекстні селектори

/Internet Explorer | /Netscape | /Opera | /Safari | /Firefox
6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0
Помилки | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так

### Опис

При створенні веб-сторінки часто доводиться вкладати одні теги всередину інших. Щоб стилі для цих тегів використовувалися коректно, допоможуть селекторы, які працюють тільки в певному контексті. Наприклад, задати стиль для тега <B> тільки коли він розташовується усередині контейнера <P>. Таким чином можна одночасно встановити стиль для окремого тега, а також для тега, який знаходиться усередині іншого.

### Синтаксис

E F { Опис правил стилю }

Тут E це батьківський тег, а F - тег, розташований в контейнері <E>. В цьому випадку стиль застосовуватиметься до тега <F>, коли дотримується наступний код <E><F></F></E>. Не обов'язково мають бути два теги, допускається довільний рівень вкладення. При цьому конструкція може записуватися так: div div ul li {..}.

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

    <html>

      <head>

        <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

        <title>Контекстні селекторы</title>

        <style type="text/css">

          P B {

            font - family: Times, serif; /* Сімейство шрифту */

            font - weight: bold; /* Жирне зображення */

            color: navy; /* Синій колір тексту */

          }

        </style>

      </head>

      <body>

        <div><b>Жирне зображення тексту</b></div>

        <p><b>Одночасно жирне зображення тексту

        і виділене кольором</b></p>

      </body>

    </html>

У цьому прикладі показано звичайне застосування тега <B> і цього ж тега, коли він вкладений всередину абзацу <P>. При цьому міняється колір і шрифт тексту, як показано на мал. 1.

Мал. 1. Використання контекстних селекторів

### Браузери

У браузері Internet Explorer версії 6 і нижче не працює комбінація контекстних селекторів і псевдокласу hover. Наприклад, стиль для селекторів P B : hover або A: hover SPAN застосовуватися не буде.