Selektory rodzeństwa

Selektory rodzeństwa

Również w przypadku tego typu selektorów opieramy się na zależnościach obowiązujących w języku XHTML/HTML. Na podstawie tego rodzaju selektora możemy przypisać styl elementowi bezpośrednio sąsiadującemu z innymi. By warunek został spełniony, oba selektory muszą mieć wspólnego „rodzica”. Przykładem może być poniższy listing.

p + span
{
font-style:italic;
text-decoration:underline;
}

Zgodnie z tym, co napisałem powyżej, znaczniki <p></p> oraz <span></span> muszą ze sobą sąsiadować.

<div>
<p>To jest tekst akapitu.</p> <span>A tutaj działa selektor rodzeństwa.</span>
<span>Natomiast ten tekst, pomimo że jest zamknięty w span, już nie jest formatowany, bo nie sąsiaduje bezpośrednio z akapitem.</span>
</div>

W powyższym kodzie wyraźnie widać, iż blok tekstu sąsiaduje ze znacznikiem <span></span>, natomiast drugi znacznik <span></span> bezpośrednio nie sąsiaduje z <p></p>.

Podobnie jak selektor dziecka, również ten przykład nie działa w przeglądarce MS Internet Explorer.