CSS - SOMO LA 19: Pseudo-classes na Pseudo-elements

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.

📘 Utangulizi

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.


📚 Maudhui ya Somo


✅ 1. Pseudo-classes

🔹 :hover

button:hover {
  background-color: green;
  color: white;
}

💡 Inafaa sana kwa vitufe (buttons), links, na menyu.


🔹 :first-child

p:first-child {
  font-weight: bold;
}

🔹 :last-child

li:last-child {
  color: red;
}

✅ 2. Pseudo-elements

🔹 ::before

p::before {
  content: "👉 ";
}

🔹 ::after

p::after {
  content: " ✅";
}

💡 Zinafaa sana kwa kuongeza icons au alama bila kubadilisha HTML.


🔹 ::selection

::selection {
  background: yellow;
  color: black;
}

✅ 3. Mfano Kamili

<p>Hii ni paragraph ya mfano.</p>
p:hover {
  color: blue;
}

p:first-child {
  text-transform: uppercase;
}

p::before {
  content: "💡 ";
}

p::after {
  content: " 📘";
}

✅ Hitimisho

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.


🔜 Somo Linalofuata: SOMO LA 20 - Transition na Animation

Tutajifunza jinsi ya kuleta miondoko (motion) kwa kutumia transition, transform, na animation kwenye CSS.


🧠 Maswali ya Kujitathmini

  1. :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

  2. ::before hufanya nini?
    a) Kubadilisha background ya element
    b) Kuongeza content kabla ya element
    c) Kuficha element
    d) Kuweka margin mpya

  3. Ili kuchagua element ya mwisho ndani ya mzazi, utatumia:
    a) :hover
    b) :nth-child(1)
    c) :last-child
    d) ::after

  4. ::selection hutumika wapi?
    a) Kwenye picha pekee
    b) Kubadilisha style ya content inayo-highlightiwa
    c) Kubadilisha background tu
    d) Kuweka icon

  5. Kipi kati ya vifuatavyo ni pseudo-class?
    a) ::after
    b) :hover
    c) ::selection
    d) ::before

 

Jiunge nasi WhatsApp kupata update zetu

Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 1970-01-01 03:33:45 Topic: CSS Main: ICT File: Download PDF Views 272

Share On:

Facebook WhatsApp
Sponsored links
👉1 Kitau cha Fiqh    👉2 kitabu cha Simulizi    👉3 Bongolite - Game zone - Play free game    👉4 Dua za Mitume na Manabii    👉5 Madrasa kiganjani    👉6 Tafasiri ya Riyadh Swalihina   

Post zinazofanana:

CSS - SOMO LA 28: CSS Timing Functions

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...
CSS - somo la 5: Njia tano zinazotumika kuweka rangi kwenye css

Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css

Soma Zaidi...
CSS - somo la 4: Aina za css selecto

Katika somo hili uatkwenda kujifunza aina za css selectors

Soma Zaidi...
CSS - SOMO LA 23: Uelewa Zaidi wa CSS Animation na Transition

Somo hili linakuletea ufahamu wa kina juu ya CSS Transitions na Animations, likifafanua vipengele vyake muhimu, matumizi, na namna ya kutumia properties mbalimbali za animation kwa ufanisi katika kurahisisha muonekano na mtumiaji wa tovuti.

Soma Zaidi...
CSS - somo la 3: syntax za css yaani sheria za uandishi wa css

Katika somo hili utakwenda kujifunza sheria za uandish wa css yaani syntax za css

Soma Zaidi...
CSS - somo la 2: Jinsi ya ku weka code za css kwenye HTML

katika somo hili utajifunza jinsi ya ku install css kwenye ukurasa wa html

Soma Zaidi...
CSS - somo la 6: Kuweka Background kwenye HTML kwa kutumia CSS

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...
CSS - SOMO LA 17: Flexbox Advanced

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...
CSS - SOMO LA 16: Flexbox Basics

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...
CSS - SOMO LA 30: CSS Functions – calc(), clamp(), var(), min(), max() na Custom Functions

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...