Selektor sąsiadującego brata odszukuje każdy element HTML, który jest sąsiadującym elementem bratem elementu HTML odszukanego przez selektor, który podaliśmy przed znakiem + danej reguły CSS.
Selektor sąsiadującego brata tworzymy co najmniej za pomocą dwóch selektorów CSS, pomiędzy którymi należy umieścić jeden znak + (plus) oraz ewentualnie inne białe znaki.
Informacje techniczne o selektorze sąsiadującego brata
ograniczenie - elementy HTML
brak
ograniczenie - właściwości CSS
brak
Przykładowa reguła CSS, selektor sąsiadującego brata
Wyjaśnienie przykładowej reguły CSS
div + p
do każdego elementu p, który jest sąsiadującym elementem bratem elementu div
color
dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Kurs CSS</title>
<style>
div + p {
color:red;
}
</style>
</head>
<body>
<div>
tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "p", który byłby sąsiadującym elementem bratem elementu "div"
</div>
<div>
<p>
tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie jest sąsiadującym elementem bratem elementu "div", lecz jest pierwszym elementem dzieckiem elementu "div"
</p>
</div>
<p>
tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element HTML jest elementem "p", który jest sąsiadującym elementem bratem elementu "div"
</p>
<p>
tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ ten element HTML nie jest sąsiadującym elementem bratem elementu "div", lecz ten element HTML jest elementem "p", który jest drugim elementem bratem drugiego elementu "div" oraz trzecim elementem bratem pierwszego elementu "div"
</p>
<div>
tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem "p", który byłby sąsiadującym elementem bratem elementu "div"
</div>
</body>
</html>
