Grannselektor i CSS
Grannselektorn + låter dig
välja ett element baserat på dess granne ovanför.
Syntaks
selektor1 + selektor2 {
}
Exempel
Låt oss rikta in oss på alla p-taggar,
som omedelbart finns efter h2-taggar,
och färga dem röda:
<h2>text</h2>
<p>
+
</p>
<p>
-
</p>
<p>
-
</p>
h2 + p {
color: red;
}
:
Exempel
Låt oss rikta in oss på alla p-taggar,
som omedelbart finns efter element
med klassen .test, och färga dem röda:
<p class="test">
text
</p>
<p>
+
</p>
<p>
-
</p>
.test + p {
color: red;
}
:
Exempel
Låt oss rikta in oss på alla element med klassen
.elem, som omedelbart finns
efter element med klassen .test, och
färga dem röda:
<p class="test">
text
</p>
<p class="elem">
+
</p>
<p>
-
</p>
.test + .elem {
color: red;
}
:
Se även
-
Barnselektor,
som låter dig välja element baserat på omedelbart nedärvning -
Kontextuell selektor,
som låter dig välja ett element baserat på dess förälder -
Syskonselektor,
som låter dig välja element efter ett angivet element -
Universell selektor,
som låter dig välja alla element
