Katika somo hili, utajifunza kuhusu pseudo-classes kama :hover, :first-child, na :last-child, pamoja na pseudo-elements kama ::before, ::after, na ::selection. Hizi husaidia kubadili au kuongeza mitindo maalum kulingana na hali ya elementi au sehemu maalum ya elementi.
Pseudo-classes na pseudo-elements ni sehemu muhimu ya CSS ambazo hukuwezesha kubadilisha mwonekano wa elementi kulingana na hali fulani au kuongeza content ya ziada bila kubadilisha HTML. Ni zana muhimu sana kwenye ubunifu wa kipekee na mwingiliano bora wa mtumiaji.
:hover
Inatumika kubadilisha style ya element unapoelekezewa pointer ya mouse.
button:hover {
background-color: green;
color: white;
}
💡 Inafaa sana kwa vitufe (buttons), links, na menyu.
:first-child
Huchagua elementi ya kwanza ndani ya mzazi wake.
p:first-child {
font-weight: bold;
}
:last-child
Huchagua elementi ya mwisho ndani ya mzazi wake.
li:last-child {
color: red;
}
::before
Huchomeka content kabla ya element kuonekana.
p::before {
content: "👉 ";
}
::after
Huchomeka content baada ya element.
p::after {
content: " ✅";
}
💡 Zinafaa sana kwa kuongeza icons au alama bila kubadilisha HTML.
::selection
Hubadilisha mwonekano wa maandishi yanapochaguliwa (highlighted).
::selection {
background: yellow;
color: black;
}
<p>Hii ni paragraph ya mfano.</p>
p:hover {
color: blue;
}
p:first-child {
text-transform: uppercase;
}
p::before {
content: "💡 ";
}
p::after {
content: " 📘";
}
Pseudo-classes na pseudo-elements huongeza nguvu ya CSS bila kuingilia HTML. Zinaruhusu kufanya mabadiliko ya hali (state), kuchagua elementi maalum, na kuongeza content ya ziada kwa ubunifu. Ni nyenzo muhimu sana kwenye urembo na usability ya tovuti.
Tutajifunza jinsi ya kuleta miondoko (motion) kwa kutumia transition
, transform
, na animation
kwenye CSS.
:hover
hutumika lini?
a) Wakati wa kubonyeza tu
b) Wakati element inaonekana tu
c) Wakati pointer ya mouse iko juu ya element
d) Wakati element iko mwisho wa HTML
::before
hufanya nini?
a) Kubadilisha background ya element
b) Kuongeza content kabla ya element
c) Kuficha element
d) Kuweka margin mpya
Ili kuchagua element ya mwisho ndani ya mzazi, utatumia:
a) :hover
b) :nth-child(1)
c) :last-child
d) ::after
::selection
hutumika wapi?
a) Kwenye picha pekee
b) Kubadilisha style ya content inayo-highlightiwa
c) Kubadilisha background tu
d) Kuweka icon
Kipi kati ya vifuatavyo ni pseudo-class?
a) ::after
b) :hover
c) ::selection
d) ::before
Jiunge nasi WhatsApp kupata update zetu
Umeionaje Makala hii.. ?
Katika somo hili, tutajifunza kipengele kipya kinachoitwa if() function ndani ya CSS, kilichoanza kupatikana kwenye toleo la Chrome 137. Kipengele hiki kinaturuhusu kuandika mantiki ya masharti moja kwa moja kwenye property ya CSS, bila kutumia JavaScript wala media query zilizotawanyika. Tutajifunza pia aina za queries: media(), supports(), na style() pamoja na matumizi yao ya kivitendo kwenye tovuti. Mwisho, tutaeleza kwa kina kuhusu pointer na any-pointer.
Soma Zaidi...Katika somo hili tutajifunza kuhusu CSS Timing Functions, ambazo hutumika kudhibiti kasi na mtiririko wa transition na animation. Utaelewa tofauti kati ya ease, linear, ease-in, ease-out, ease-in-out, pamoja na jinsi ya kutumia cubic-bezier() kwa kudhibiti mwendo wa mabadiliko kwenye elementi.
Soma Zaidi...Katika somo hili tutajifunza jinsi ya kutumia fonts za kipekee (custom fonts) katika tovuti kwa kutumia njia mbili kuu: Google Fonts na @font-face. Tutajifunza pia sababu za kutumia fonts maalum, faida zake, na jinsi ya kuzidhibiti kwenye CSS.
Soma Zaidi...Katika somo hili utajifunza jinsi ya kudhibiti mwonekano wa maandishi kwa kutumia fonti kwenye CSS. Utajifunza jinsi ya kubadilisha aina ya fonti, ukubwa, mtindo, unene, na mpangilio wa maandishi ili yaweze kuonekana kwa mvuto na usomaji bora.
Soma Zaidi...Katika somo hili utajifunza jinsi ya kutumia float ili kupanga elementi upande wa kushoto (left) au kulia (right). Pia utajifunza jinsi ya kutumia clear kuondoa athari za float na kuhakikisha layout yako inabaki thabiti.
Soma Zaidi...Katika somo hili, utajifunza jinsi ya kudhibiti muonekano wa sehemu ya nyuma (background) ya HTML element kwa kutumia CSS. Utaweza kuongeza rangi, picha, kuweka picha zisirudiwarudiwe, na hata kusogeza picha kwenye maeneo tofauti ya ukurasa.
Soma Zaidi...Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.
Soma Zaidi...Katika somo hili, utajifunza jinsi ya kudhibiti mipaka (borders) ya vipengele kwa kutumia CSS. Tutajifunza namna ya kuweka unene wa border, rangi, aina ya mstari, na pia jinsi ya kutumia border kwa upande mmoja tu.
Soma Zaidi...Katika somo hili utajifunza muundo wa boksi (Box Model) katika CSS. Box model ni mfumo wa msingi wa kupanga vipengele katika ukurasa wa HTML, ukiwa na sehemu kuu nne: content, padding, border, na margin.
Soma Zaidi...Katika somo hili, tutajifunza kuhusu @import — amri inayotumika kuingiza faili moja la CSS ndani ya jingine. Tutaona namna ya kuitumia, faida zake, hasara zake, na tofauti kati yake na njia mbadala ya <link> ndani ya HTML.
Soma Zaidi...