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

? 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

• 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;
}

✅ 2. Pseudo-elements

? ::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;
}

✅ 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