Sestrski izbirnik v CSS
Sestrski izbirnik ~ omogoča izbiro
vseh elementov, ki se nahajajo za danim
elementom znotraj istega starša.
Sintaksa
izbirnik1 ~ izbirnik2 {
}
Primer
Obrnimo se na vse oznake p,
ki se nahajajo za oznakami h2, in jih
obarvajmo rdeče:
<div>
<h2>text</h2>
<p>
+
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
h2 ~ p {
color: red;
}
:
Primer
Obrnimo se na vse oznake p,
ki se nahajajo za elementi z razredom .test,
in jih obarvajmo rdeče:
<div>
<p class="test">
text
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
.test ~ p {
color: red;
}
:
Primer
Obrnimo se na vse elemente z razredom
.elem, ki se nahajajo za elementi
z razredom .test, in jih obarvajmo rdeče:
<div>
<p class="test">
text
</p>
<p class="elem">
+
</p>
<p>
-
</p>
<p class="elem">
+
</p>
</div>
<p>
-
</p>
.test ~ .elem {
color: red;
}
:
Glejte tudi
-
Podrejeni izbirnik,
ki omogoča izbiro elementov po neposredni gnezdenosti -
Kontekstualni izbirnik,
ki omogoča izbiro elementa po njegovem staršu -
Sosednji izbirnik,
ki omogoča izbiro elementa po njegovem sosedu -
Univerzalni izbirnik,
ki omogoča izbiro vseh elementov
