Sarežģītas pēcteču selektoru un klases kombinācijas CSS
Pieņemsim, ka mums ir šāds kods:
<div class="block">
<h2 class="header">Virsraksts h2</h2>
<p>
teksts
</p>
<h3 class="header">Virsraksts h3</h3>
<p>
teksts
</p>
<p>
teksts
</p>
</div>
<div class="block">
<h2 class="header">Virsraksts h2</h2>
<p>
teksts
</p>
<h3 class="header">Virsraksts h3</h3>
<p>
teksts
</p>
<p>
teksts
</p>
</div>
Atradīsim visus elementus ar klasi header,
kas atrodas elementa ar klasi block iekšpusē,
un tiem iestatīsim fontu Arial:
.block .header {
font-family: Arial;
}
Kā redzams HTML kodā, elementa ar
klasi block iekšpusē elementi ar klasi header
var būt gan h2 virsraksti, gan
h3 virsraksti. Uzrakstīsim
selektorus, kas atšķir šos virsrakstus, un kaut ko
ar tiem izdarīsim.
Izvēlēsimies visus h2 ar klasi header,
kas atrodas elementa ar klasi block iekšpusē:
.block h2.header {
font-size: 30px;
color: red;
}
Un tagad izvēlēsimies visus h3 ar klasi
header, kas atrodas elementa
ar klasi block iekšpusē:
.block h3.header {
font-size: 20px;
color: green;
}
Apvienosim visu mūsu CSS kopā:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Pielietosim to mūsu HTML kodam:
Paskaidrojiet, ko izvēlas selektors zemāk redzamajā kodā. Pēc tam uzrakstiet HTML kodu, kas atbilst šim selektoram. Lūk, kods ar selektoru:
.eee .bbb {
color: red;
}
Paskaidrojiet, ko izvēlas selektors zemāk redzamajā kodā. Pēc tam uzrakstiet HTML kodu, kas atbilst šim selektoram. Lūk, kods ar selektoru:
.eee h2 {
color: red;
}
Paskaidrojiet, ko izvēlas selektors zemāk redzamajā kodā. Pēc tam uzrakstiet HTML kodu, kas atbilst šim selektoram. Lūk, kods ar selektoru:
.eee h2.bbb {
color: red;
}
Paskaidrojiet, ko izvēlas selektors zemāk redzamajā kodā. Pēc tam uzrakstiet HTML kodu, kas atbilst šim selektoram. Lūk, kods ar selektoru:
.eee h3.bbb {
color: red;
}
Paskaidrojiet, ko izvēlas selektors zemāk redzamajā kodā. Pēc tam uzrakstiet HTML kodu, kas atbilst šim selektoram. Lūk, kods ar selektoru:
.eee p.bbb {
color: red;
}
Paskaidrojiet, ko izvēlas selektors zemāk redzamajā kodā. Pēc tam uzrakstiet HTML kodu, kas atbilst šim selektoram. Lūk, kods ar selektoru:
.eee .bbb .kkk {
color: red;
}
