Sesterský selektor v CSS
Sesterský selektor ~ umožňuje vybrat
všechny prvky, které se nacházejí za daným
prvkem uvnitř stejného rodiče.
Syntaxe
selektor1 ~ selektor2 {
}
Příklad
Pojďme oslovit všechny tagy p,
které se nacházejí za tagy h2, a obarvit
je červeně:
<div>
<h2>text</h2>
<p>
+
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
h2 ~ p {
color: red;
}
:
Příklad
Pojďme oslovit všechny tagy p,
které se nacházejí za prvky s třídou .test,
a obarvit je červeně:
<div>
<p class="test">
text
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
.test ~ p {
color: red;
}
:
Příklad
Pojďme oslovit všechny prvky s třídou
.elem, které se nacházejí za prvky
s třídou .test, a obarvit je červeně:
<div>
<p class="test">
text
</p>
<p class="elem">
+
</p>
<p>
-
</p>
<p class="elem">
+
</p>
</div>
<p>
-
</p>
.test ~ .elem {
color: red;
}
:
Viz také
-
Dceřiný selektor,
který umožňuje vybrat prvky podle přímého vnoření -
Kontextový selektor,
který umožňuje vybrat prvek podle jeho rodiče -
Sousedský selektor,
který umožňuje vybrat prvek podle jeho souseda -
Univerzální selektor,
který umožňuje vybrat všechny prvky
