Kas yra pseudoklasės CSS?

CSS pseudoklasės yra raktiniai žodžiai, pridedami prie selektorių, norint nurodyti elemento ypatingą būseną. Jos leidžia taikyti stilių elementams remiantis jų sąveika su vartotoju, dokumento struktūros padėtimi ar kitomis savybėmis, kurios negali būti išreikštos standartiniais selektoriais.

Pseudoklasių pavyzdžiai:

• Vartotojo būsenos:

  • :hover - elementas, kurio viršuje yra pelės žymeklis.
  • :active - elementas, kuris yra aktyvinamas (pavyzdžiui, paspausta pelės mygtuku).
  • :focus - įvesties elementas, kuris yra dėmesio centre (pavyzdžiui, teksto laukas).
  • :visited - nuoroda, kurią vartotojas jau lankėsi.
  • :link - nuoroda, kurios vartotojas dar neaplankė.

• Padėtis struktūroje:

  • :first-child - pirmas savo tėvo vaiko elementas.
  • :last-child - paskutinis savo tėvo vaiko elementas.
  • :nth-child(n) - n-tas savo tėvo vaiko elementas.
  • :first-of-type - pirmas savo tipo elementas tarp vaikų.
  • :last-of-type - paskutinis savo tipo elementas tarp vaikų.

• Kitos:

  • :empty - elementas, kuris neturi vaikų ar teksto.
  • :not(selector) - elementai, kurie neatitinka nurodyto selektoriaus.

Sintezė:

selector:pseudo-class {
  property: value;
}

Pavyzdys naudojimo:

/* Teksto spalvos keitimas, kai pelės žymeklis yra virš pastraipos */
p:hover {
  color: blue;
}

/* Stilius pirmam sąrašo elementui */
li:first-child {
  font-weight: bold;
}

Pseudoklasės išplečia selektorių galimybes, leidžiančias kurti dinamiškesnius ir interaktyvesnius sąsajos elementus be JavaScript, naudojant paprastus stiliaus pakeitimus.