Combinații complexe de selectori de descendenți și clase în CSS
Să presupunem că avem următorul cod:
<div class="block">
<h2 class="header">Titlu h2</h2>
<p>
text
</p>
<h3 class="header">Titlu h3</h3>
<p>
text
</p>
<p>
text
</p>
</div>
<div class="block">
<h2 class="header">Titlu h2</h2>
<p>
text
</p>
<h3 class="header">Titlu h3</h3>
<p>
text
</p>
<p>
text
</p>
</div>
Să găsim toate elementele cu clasa header,
care se află în interiorul elementului cu clasa block,
și să le setăm fontul Arial:
.block .header {
font-family: Arial;
}
După cum se vede în codul HTML, în interiorul elementului cu
clasa block elementele cu clasa header
pot fi atât titluri h2, cât
și titluri h3. Să scriem
selectori care să facă diferența între aceste titluri și să facem ceva
cu aceste titluri.
Să selectăm toate h2 cu clasa header,
aflate în interiorul elementului cu clasa block:
.block h2.header {
font-size: 30px;
color: red;
}
Și acum să selectăm toate h3 cu clasa
header, aflate în interiorul elementului
cu clasa block:
.block h3.header {
font-size: 20px;
color: green;
}
Să adunăm tot CSS-ul nostru împreună:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Să aplicăm acest CSS codului nostru HTML:
Explicați ce selectează selectorul din codul de mai jos. Apoi scrieți cod HTML care se potrivește cu acest selector. Iată codul cu selectorul:
.eee .bbb {
color: red;
}
Explicați ce selectează selectorul din codul de mai jos. Apoi scrieți cod HTML care se potrivește cu acest selector. Iată codul cu selectorul:
.eee h2 {
color: red;
}
Explicați ce selectează selectorul din codul de mai jos. Apoi scrieți cod HTML care se potrivește cu acest selector. Iată codul cu selectorul:
.eee h2.bbb {
color: red;
}
Explicați ce selectează selectorul din codul de mai jos. Apoi scrieți cod HTML care se potrivește cu acest selector. Iată codul cu selectorul:
.eee h3.bbb {
color: red;
}
Explicați ce selectează selectorul din codul de mai jos. Apoi scrieți cod HTML care se potrivește cu acest selector. Iată codul cu selectorul:
.eee p.bbb {
color: red;
}
Explicați ce selectează selectorul din codul de mai jos. Apoi scrieți cod HTML care se potrivește cu acest selector. Iată codul cu selectorul:
.eee .bbb .kkk {
color: red;
}
