Neighbor selector
Сусідні селектори
Сусідні називаються елементи веб-сторінки, коли вони йдуть безпосередньо один за одним у коді документа.
Синтаксис
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>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>Сусідними тут є елементи <b> і <i>, і навіть <i> і <tt>. При цьому <b> і <tt> до сусідніх елементів не належать через те, що між ними розташований контейнер <i>.
Приклад
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>Neighbouring Selectors</title>
<style>
b + i {
color: red; /* Red text color */
}
</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>