Sugulase valija CSS-is
Sugulase valija ~ võimaldab valida
kõik elemendid, mis asuvad pärast määratud
elementi sama vanemasisendi sees.
Süntaks
valija1 ~ valija2 {
}
Näide
Pöördume kõigi siltide p poole,
mis asuvad pärast silte h2, ja värvime
need punaseks:
<div>
<h2>text</h2>
<p>
+
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
h2 ~ p {
color: red;
}
:
Näide
Pöördume kõigi siltide p poole,
mis asuvad pärast elemente klassiga .test,
ja värvime need punaseks:
<div>
<p class="test">
text
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
.test ~ p {
color: red;
}
:
Näide
Pöördume kõigi elementide poole klassiga
.elem, mis asuvad pärast elemente
klassiga .test, ja värvime need punaseks:
<div>
<p class="test">
text
</p>
<p class="elem">
+
</p>
<p>
-
</p>
<p class="elem">
+
</p>
</div>
<p>
-
</p>
.test ~ .elem {
color: red;
}
:
Vaata ka
-
Lapse valija,
mis võimaldab valida elemendid otsese pesastuse järgi -
Kontekstivalija,
mis võimaldab valida elemendi selle vanema järgi -
Naabervalija,
mis võimaldab valida elemendi selle naabri järgi -
Universaalvalija,
mis võimaldab valida kõik elemendid
