Syskonselektor i CSS
Syskonselektorn ~ låter dig välja
alla element som finns efter det angivna
elementet inom samma förälder.
Syntax
selektor1 ~ selektor2 {
}
Exempel
Låt oss rikta in oss på alla p-taggar,
som finns efter h2-taggar, och färga
dem i rött:
<div>
<h2>text</h2>
<p>
+
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
h2 ~ p {
color: red;
}
:
Exempel
Låt oss rikta in oss på alla p-taggar,
som finns efter element med klassen .test,
och färga dem i rött:
<div>
<p class="test">
text
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
.test ~ p {
color: red;
}
:
Exempel
Låt oss rikta in oss på alla element med klassen
.elem, som finns efter element
med klassen .test, och färga dem i rött:
<div>
<p class="test">
text
</p>
<p class="elem">
+
</p>
<p>
-
</p>
<p class="elem">
+
</p>
</div>
<p>
-
</p>
.test ~ .elem {
color: red;
}
:
Se även
-
Barnselektor,
som låter dig välja element efter direkt inneslutning -
Kontextuell selektor,
som låter dig välja element efter dess förälder -
Intilliggande syskonselektor,
som låter dig välja element efter dess granne -
Universell selektor,
som låter dig välja alla element
