Sibling selektor u CSS-u
Sibling selektor ~ omogućava izbor
svih elemenata koji se nalaze nakon određenog
elementa unutar istog roditelja.
Sintaksa
selektor1 ~ selektor2 {
}
Primer
Hajde da pristupimo svim tagovima p,
koji se nalaze nakon tagova h2, i obojimo
ih crvenom bojom:
<div>
<h2>text</h2>
<p>
+
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
h2 ~ p {
color: red;
}
:
Primer
Hajde da pristupimo svim tagovima p,
koji se nalaze nakon elemenata sa klasom .test,
i obojimo ih crvenom bojom:
<div>
<p class="test">
text
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
.test ~ p {
color: red;
}
:
Primer
Hajde da pristupimo svim elementima sa klasom
.elem, koji se nalaze nakon elemenata
sa klasom .test, i obojimo ih crvenom
bojom:
<div>
<p class="test">
text
</p>
<p class="elem">
+
</p>
<p>
-
</p>
<p class="elem">
+
</p>
</div>
<p>
-
</p>
.test ~ .elem {
color: red;
}
:
Pogledajte takođe
-
Child selektor,
koji omogućava izbor elemenata po neposrednoj ugnježdenosti -
Kontekstualni selektor,
koji omogućava izbor elementa po njegovom roditelju -
Adjacent sibling selektor,
koji omogućava izbor elementa po njegovom susedu -
Univerzalni selektor,
koji omogućava izbor svih elemenata
