Zapletene kombinacije selektorja potomcev in razredov v CSS
Recimo, da imamo naslednjo kodo:
<div class="block">
<h2 class="header">Naslov h2</h2>
<p>
besedilo
</p>
<h3 class="header">Naslov h3</h3>
<p>
besedilo
</p>
<p>
besedilo
</p>
</div>
<div class="block">
<h2 class="header">Naslov h2</h2>
<p>
besedilo
</p>
<h3 class="header">Naslov h3</h3>
<p>
besedilo
</p>
<p>
besedilo
</p>
</div>
Poiščimo vse elemente z razredom header,
ki se nahajajo znotraj elementa z razredom block,
in jim nastavimo pisavo Arial:
.block .header {
font-family: Arial;
}
Kot je razvidno iz HTML kode, so lahko elementi z razredom header
znotraj elementa z razredom block
tako naslovi h2 kot tudi naslovi h3. Napišimo
selektorje, ki razlikujejo te naslove, in nekaj naredimo
s temi naslovi.
Izberimo vse h2 z razredom header,
ki se nahajajo znotraj elementa z razredom block:
.block h2.header {
font-size: 30px;
color: red;
}
In zdaj izberimo vse h3 z razredom
header, ki se nahajajo znotraj elementa
z razredom block:
.block h3.header {
font-size: 20px;
color: green;
}
Zložimo vso našo CSS kodo skupaj:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Uporabimo jo za našo HTML kodo:
Povejte, kaj izbira selektor v spodnji kodi. Nato napišite HTML kodo, ki ustreza temu selektorju. Tukaj je koda s selektorjem:
.eee .bbb {
color: red;
}
Povejte, kaj izbira selektor v spodnji kodi. Nato napišite HTML kodo, ki ustreza temu selektorju. Tukaj je koda s selektorjem:
.eee h2 {
color: red;
}
Povejte, kaj izbira selektor v spodnji kodi. Nato napišite HTML kodo, ki ustreza temu selektorju. Tukaj je koda s selektorjem:
.eee h2.bbb {
color: red;
}
Povejte, kaj izbira selektor v spodnji kodi. Nato napišite HTML kodo, ki ustreza temu selektorju. Tukaj je koda s selektorjem:
.eee h3.bbb {
color: red;
}
Povejte, kaj izbira selektor v spodnji kodi. Nato napišite HTML kodo, ki ustreza temu selektorju. Tukaj je koda s selektorjem:
.eee p.bbb {
color: red;
}
Povejte, kaj izbira selektor v spodnji kodi. Nato napišite HTML kodo, ki ustreza temu selektorju. Tukaj je koda s selektorjem:
.eee .bbb .kkk {
color: red;
}
