Slekterselektor i CSS
Slekterselektoren ~ lar deg velge
alle elementer som kommer etter et gitt
element innenfor samme forelder.
Syntaks
selektor1 ~ selektor2 {
}
Eksempel
La oss velge alle p-tagger
som kommer etter h2-tagger, og fargelegge
dem i rødt:
<div>
<h2>tekst</h2>
<p>
+
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
h2 ~ p {
color: red;
}
:
Eksempel
La oss velge alle p-tagger
som kommer etter elementer med klassen .test,
og fargelegge dem i rødt:
<div>
<p class="test">
tekst
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
.test ~ p {
color: red;
}
:
Eksempel
La oss velge alle elementer med klassen
.elem som kommer etter elementer
med klassen .test, og fargelegge dem i rødt:
<div>
<p class="test">
tekst
</p>
<p class="elem">
+
</p>
<p>
-
</p>
<p class="elem">
+
</p>
</div>
<p>
-
</p>
.test ~ .elem {
color: red;
}
:
Se også
-
Barneselektor,
som lar deg velge elementer basert på direkte innlegging -
Kontekstuell selektor,
som lar deg velge et element basert på dets forelder -
Naborselektor,
som lar deg velge et element basert på dets nabo -
Universell selektor,
som lar deg velge alle elementer
