# Сусідні селектори

/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
Ні | Помилки | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так

### Опис

Сусідніми називаються елементи веб-сторінки, коли вони слідують безпосередньо один за одним в коді документу.

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

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

Для управління стилем сусідніх елементів використовується символ плюса (+), який встановлюється між двома селекторами E і F. Пропуски навколо плюса не обов'язкові. Стиль при такому записі застосовується до елементу F, але тільки у тому випадку, якщо він є сусіднім для елементу E і слідує відразу після нього. Розглянемо декілька прикладів.

<p>Lorem ipsum <b>dolor</b> sit amet.</p>

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

<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>

Теги <VAR> і <B> ніяк не перекриваються і є сусідніми елементами. Те, що вони розташовані усередині контейнера <P>, не впливає на їх відношення.

<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

Сусідніми тут являються теги <B> і <I>, а також <I> і <TT>. При цьому <B> і <TT> до сусідніх елементів не відносяться через те, що між ними розташований контейнер <I>.

Приклад

HTML 4.01CSS 2.1IE 6IE 7IE 8Op 9.5Sa 3.1Ff 2.0Ff 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">

          B + I {

            color: red; /* Червоний колір тексту */

          }

        </style>

      </head>

      <body>

          <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>

          <p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>

      </body>

    </html>

### Браузери

Браузер Internet Explorer 7 не застосовує стиль, якщо між селекторами розташовується коментар (B + /* плюс */ I).