Съседен селектор в CSS
Съседният селектор + позволява
избор на елемент въз основа на неговия горен съсед.
Синтаксис
селектор1 + селектор2 {
}
Пример
Нека се обърнем към всички тагове p,
които се намират непосредствено след таговете h2,
и ги оцветим в червено:
<h2>text</h2>
<p>
+
</p>
<p>
-
</p>
<p>
-
</p>
h2 + p {
color: red;
}
:
Пример
Нека се обърнем към всички тагове p,
които се намират непосредствено след елементи
с клас .test, и ги оцветим в червено:
<p class="test">
text
</p>
<p>
+
</p>
<p>
-
</p>
.test + p {
color: red;
}
:
Пример
Нека се обърнем към всички елементи с клас
.elem, които се намират непосредствено
след елементи с клас .test, и
ги оцветим в червено:
<p class="test">
text
</p>
<p class="elem">
+
</p>
<p>
-
</p>
.test + .elem {
color: red;
}
:
Вижте също
-
Дъщерен селектор,
който позволява избор на елементи по непосредствена влагане -
Контекстен селектор,
който позволява избор на елемент по неговия родител -
Братски селектор,
който позволява избор на елементи след зададен -
Универсален селектор,
който позволява избор на всички елементи
