Mchanganyiko Changamano wa Kichaguzi cha Vizazi na Vitendo katika CSS
Hebu sasa tufanye msimbo ufuatao:
<div class="block">
<h2 class="header">Kichwa h2</h2>
<p>
maandishi
</p>
<h3 class="header">Kichwa h3</h3>
<p>
maandishi
</p>
<p>
maandishi
</p>
</div>
<div class="block">
<h2 class="header">Kichwa h2</h2>
<p>
maandishi
</p>
<h3 class="header">Kichwa h3</h3>
<p>
maandishi
</p>
<p>
maandishi
</p>
</div>
Wacha tupate vipengele vyote na kitendo header,
vilivyo ndani ya kipengele chenye kitendo block,
na tuwape fonti Arial:
.block .header {
font-family: Arial;
}
Kama inavyoonekana kwenye msimbo wa HTML, ndani ya kipengele chenye
kitendo block vipengele vya kitendo header
vinaweza kuwa vichwa h2, au
vichwa h3. Hebu tuandike
vichaguzi, vinavyotofautisha vichwa hivi, na kitu
tufanye na vichwa hivi.
Wacha tuchague h2 zote zenye kitendo header,
zilizo ndani ya kipengele chenye kitendo block:
.block h2.header {
font-size: 30px;
color: red;
}
Sasa tuchague h3 zote zenye kitendo
header, zilizo ndani ya kipengele
chenye kitendo block:
.block h3.header {
font-size: 20px;
color: green;
}
Wacha tukusanye CSS yetu yote pamoja:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Tutumie kwenye msimbo wetu wa HTML:
Eleza, kichaguzi kinachochagua nini kwenye msimbo uliowekwa hapa chini. Kisha andika msimbo wa HTML, unaofaa kwa kichaguzi hiki. Huu ni msimbo na kichaguzi:
.eee .bbb {
color: red;
}
Eleza, kichaguzi kinachochagua nini kwenye msimbo uliowekwa hapa chini. Kisha andika msimbo wa HTML, unaofaa kwa kichaguzi hiki. Huu ni msimbo na kichaguzi:
.eee h2 {
color: red;
}
Eleza, kichaguzi kinachochagua nini kwenye msimbo uliowekwa hapa chini. Kisha andika msimbo wa HTML, unaofaa kwa kichaguzi hiki. Huu ni msimbo na kichaguzi:
.eee h2.bbb {
color: red;
}
Eleza, kichaguzi kinachochagua nini kwenye msimbo uliowekwa hapa chini. Kisha andika msimbo wa HTML, unaofaa kwa kichaguzi hiki. Huu ni msimbo na kichaguzi:
.eee h3.bbb {
color: red;
}
Eleza, kichaguzi kinachochagua nini kwenye msimbo uliowekwa hapa chini. Kisha andika msimbo wa HTML, unaofaa kwa kichaguzi hiki. Huu ni msimbo na kichaguzi:
.eee p.bbb {
color: red;
}
Eleza, kichaguzi kinachochagua nini kwenye msimbo uliowekwa hapa chini. Kisha andika msimbo wa HTML, unaofaa kwa kichaguzi hiki. Huu ni msimbo na kichaguzi:
.eee .bbb .kkk {
color: red;
}
