Kontextový selektor v CSS
Kontextový selektor, který je reprezentován
mezerou (' '), umožňuje vybírat
prvky vnořené do daného rodiče
Syntaxe
selektor1 selektor2 {
}
Příklad
Pojďme oslovit všechny prvky p
uvnitř prvků div a obarvit je na červeno:
<div>
<p>
text
</p>
<p>
text
</p>
</div>
div p {
color: red;
}
:
Příklad
Pojďme oslovit všechny prvky p
uvnitř prvku s #elem a obarvit
je na červeno:
<div id="elem">
<p>
text
</p>
<p>
text
</p>
</div>
#elem p {
color: red;
}
:
Příklad
Pojďme oslovit všechny prvky p
uvnitř prvků s třídou .block
a obarvit je na červeno:
<div class="block">
<p>
text
</p>
<p>
text
</p>
</div>
.block p {
color: red;
}
:
Příklad
Pojďme oslovit všechny prvky b
uvnitř prvků p, které se nacházejí uvnitř
prvků div a obarvit je na červeno:
<div>
<p>
text <b>+</b>
</p>
</div>
div p b {
color: red;
}
:
Viz také
-
Dceřiný selektor,
který umožňuje vybrat prvky podle přímé vnořenosti -
Sousedský selektor,
který umožňuje vybrat prvek podle jeho souseda -
Sesterský selektor,
který umožňuje vybrat prvky za daným prvkem -
Univerzální selektor,
který umožňuje vybrat všechny prvky
