Verwantskapskeuseerder in CSS
Die verwantskapskeuseerder ~ laat jou toe
om alle elemente te kies wat na 'n gegewe
element binne dieselfde ouer voorkom.
Sintaksis
keuseerder1 ~ keuseerder2 {
}
Voorbeeld
Kom ons rig ons tot alle p-etikette
wat na h2-etikette voorkom, en verf
hulle in rooi:
<div>
<h2>text</h2>
<p>
+
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
h2 ~ p {
color: red;
}
:
Voorbeeld
Kom ons rig ons tot alle p-etikette
wat na elemente met die klas .test voorkom,
en verf hulle in rooi:
<div>
<p class="test">
text
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
.test ~ p {
color: red;
}
:
Voorbeeld
Kom ons rig ons tot alle elemente met die klas
.elem, wat na elemente
met die klas .test voorkom, en verf hulle in rooi
kleur:
<div>
<p class="test">
text
</p>
<p class="elem">
+
</p>
<p>
-
</p>
<p class="elem">
+
</p>
</div>
<p>
-
</p>
.test ~ .elem {
color: red;
}
:
Sien ook
-
Kindkeuseerder,
wat jou toelaat om elemente volgens direkte insluiting te kies -
Kontekstuele keuseerder,
wat jou toelaat om 'n element volgens sy ouer te kies -
Buurtkeuseerder,
wat jou toelaat om 'n element volgens sy buurman te kies -
Universele keuseerder,
wat jou toelaat om alle elemente te kies
