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.
:hoverInatumika kubadilisha style ya element unapoelekezewa pointer ya mouse.
button:hover {
background-color: green;
color: white;
}
💡 Inafaa sana kwa vitufe (buttons), links, na menyu.
:first-childHuchagua elementi ya kwanza ndani ya mzazi wake.
p:first-child {
font-weight: bold;
}
:last-childHuchagua elementi ya mwisho ndani ya mzazi wake.
li:last-child {
color: red;
}
::beforeHuchomeka content kabla ya element kuonekana.
p::before {
content: "👉 ";
}
::afterHuchomeka content baada ya element.
p::after {
content: " ✅";
}
💡 Zinafaa sana kwa kuongeza icons au alama bila kubadilisha HTML.
::selectionHubadilisha 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 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 kwa kina kuhusu CSS Shorthand Properties — ni nini, jinsi zinavyofanya kazi, faida zake, na mifano mbalimbali ya kutumia shorthand kuandika CSS kwa njia fupi na bora zaidi.
Soma Zaidi...Katika somo hili, tutajifunza kuhusu CSS functions muhimu zinazotumika kufanya mahesabu, kuweka vipimo vya kisasa vinavyobadilika kulingana na hali ya kifaa, na kutumia variables. Tutazingatia functions kama: calc(), clamp(), var(), min(), max(), na mwishoni tutajifunza jinsi ya kutengeneza custom function kwa kutumia variables.
Soma Zaidi...Katika somo hili, utajifunza msingi wa mfumo wa Flexbox unaotumika kupanga elementi kwa usahihi ndani ya kontena. Utajifunza kuhusu display: flex;, pamoja na properties muhimu kama justify-content, align-items, flex-direction, na gap.
Soma Zaidi...Katika somo hili, utajifunza vipengele vya juu zaidi vya Flexbox: flex-wrap, flex-grow, flex-shrink, na flex-basis. Pia tutajifunza jinsi ya kujenga muundo wa safu (rows) na nguzo (columns) kwa kutumia Flexbox layout.
Soma Zaidi...Katika somo hili utakwenda kujifunza maana ya CSS, pia nitakujulisha kazi zake. Mwisho utatambuwa historia ya CSS toka kuanzishwa.
Soma Zaidi...Katika somo hili, utajifunza vipimo vinavyotumika kwenye CSS kama vile px, em, rem, %, vw, na vh. Vipimo hivi hutumika kuweka ukubwa wa maandishi, padding, margin, urefu, na upana wa vipengele kwenye tovuti.
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 kuhusu property muhimu ya CSS inayoitwa display, ambayo huamua jinsi element inavyoonyeshwa kwenye ukurasa. Tutachambua aina kuu za display: block, inline, inline-block, na none.
Soma Zaidi...Katika somo hili, utajifunza jinsi ya kutumia media queries kwa ajili ya kutengeneza tovuti zinazojibadilisha kulingana na ukubwa wa skrini. Tutazungumzia @media rules, breakpoints, na dhana ya mobile-first design.
Soma Zaidi...