Radniecības selektors CSS
Radniecības selektors ~ ļauj atlasīt
visus elementus, kas atrodas aiz norādītā
elementa viena vecāka ietvaros.
Sintakse
selektors1 ~ selektors2 {
}
Piemērs
Pievērsīsimies visiem p tagiem,
kas atrodas aiz h2 tagiem, un iekrāsosim
tos sarkanā krāsā:
<div>
<h2>text</h2>
<p>
+
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
h2 ~ p {
color: red;
}
:
Piemērs
Pievērsīsimies visiem p tagiem,
kas atrodas aiz elementiem ar klasi .test,
un iekrāsosim tos sarkanā krāsā:
<div>
<p class="test">
text
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
.test ~ p {
color: red;
}
:
Piemērs
Pievērsīsimies visiem elementiem ar klasi
.elem, kas atrodas aiz elementiem
ar klasi .test, un iekrāsosim tos sarkanā
krāsā:
<div>
<p class="test">
text
</p>
<p class="elem">
+
</p>
<p>
-
</p>
<p class="elem">
+
</p>
</div>
<p>
-
</p>
.test ~ .elem {
color: red;
}
:
Skatiet arī
-
Bērnu selektors,
kas ļauj atlasīt elementus pēc tiešās iedarbības -
Konteksta selektors,
kas ļauj atlasīt elementu pēc tā vecāka -
Kaimiņu selektors,
kas ļauj atlasīt elementu pēc tā kaimiņa -
Universālais selektors,
kas ļauj atlasīt visus elementus
