Selektory#
Kombinator następnika bratowego (~)#
E ~ F { /* deklaracje */ }Kombinator następnika bratowego # (following-sibling combinator) służy do wskazania elementów, które są następnikami bratowymi innego elementu. Kombinator następnika bratowego jest znakiem tyldy (U+007E, ~) i oddziela dwa selektory złożone. Białe znaki wokół ~ są opcjonalne i nie mają specjalnego znaczenia.
Elementy reprezentowane przez dwa selektory złożone mają tego samego rodzica w drzewie dokumentu, i element reprezentowany przez pierwszy selektor złożony (z lewej strony) poprzedza (niekoniecznie bezpośrednio) element reprezentowany przez drugi selektor (z prawej strony). Węzły nie będące elementami (np. węzły tekstowe występujące między elementami) są ignorowane przy analizie sąsiedztwa elementów.
Kombinator następnika bratowego, w przeciwieństwie do kombinatora brata następującego, może dopasować więcej niż jeden element w danym rodzicu.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {color: blue;}
</style>
</head>
<body>
<p>Akapit ma kolor czarny bo nie następuje po elemencie DIV.</p>
<div> Jakiś tekst wewnątrz DIV
<p>Akapit ma kolor czarny bo nie następuje po elemencie DIV (zawiera się w nim).<p>
Jakiś tekst wewnątrz DIV
</div>
<p>Akapit ma kolor niebieski bo następuje po elemencie DIV (natychmiast, ale nie ma to znaczenia).</p>
<p>Akapit ma kolor niebieski bo następuje po elemencie DIV (później, ale nie ma to znaczenia).</p>
</body>
</html>