Сусідніми називаються елементи веб-сторінки, якщо вони визначаються безпосередньо один за одним у коді документа. Наприклад, у коді
<p>Сусідніми елементами є
<b> <b> з <i>, <i> з <tt>, </b>
<i>але не</i>
<tt><b> з <tt>.</tt>
</p>
тег <I> є сусіднім по відношенню до тегу <B>, а тег <TT> є сусіднім по відношенню до тегу <I>. Водночас тег <TT> не є сусіднім по відношенню до тегу <B>, оскільки між ними розташовано контейнер <I>.
Зауважимо, що всі ці теги є дочірніми по відношенню до тега <P>. Відповідно, тег <P> є батьківським для тегів <B>, <I> та <TT>.
Для управління стилем сусідніх елементів використовується символ плюс (+), який розміщується між двома селекторами. Загальний синтаксис такий:
Selector1+Selector2 {опис правил стилю}
Стиль за таким записом застосовується до селектора-2, але тільки в тому випадку, якщо він є сусіднім для селектора-1 і слідує відразу після нього. Наприклад, код
<head>
<style type="text/css">
B+I {color: green}
</style>
</head>
<body>
<b>Сусідній</b>
<i>елемент</i>
<i>але не цей</i>
</body>
виведе такий текст:
Сусідній елемент але не цей
Дочірнім називається елемент, який розташований безпосередньо всередині батьківського елементу. Синтаксис означення дочірних селекторів такий:
Selector1>Selector2 {опис правил стилю}
Стиль застосовується до селектора-2, але тільки в тому випадку, якщо він є дочірнім для селектора-1.
Дочірні селектори схожі на селектори контекстні. Різниця між ними така. Стиль до дочірнього селектору застосовується тільки в тому випадку, коли він є прямим нащадком, іншими словами, безпосередньо розташовується всередині батьківського елементу. Для контекстного селектора допустимо будь-який рівень вкладеності.
