Kas ir pseido-klases CSS?

CSS pseidonoklasēs ir atslēgas vārdi, kas pievienoti selektoriem, lai norādītu elementa īpašo stāvokli. Tās ļauj piemērot stilus elementiem, balstoties uz to mijiedarbību ar lietotāju, dokumenta struktūras pozīciju vai citām īpašībām, kuras nevar izteikt ar standarta selektoriem.

Pseidonoklasu piemēri:

• Lietotāja stāvokļi:

  • :hover - elements, virs kura ir peles rādītājs.
  • :active - elements, kas tiek aktivizēts (piemēram, nospiesta peles poga).
  • :focus - ievades elements, kas ir uzmanības centrā (piemēram, teksta lauks).
  • :visited - saite, kuru lietotājs jau ir apmeklējis.
  • :link - saite, kuru lietotājs vēl nav apmeklējis.

• Pozīcija struktūrā:

  • :first-child - pirmais savas vecāka bērna elements.
  • :last-child - pēdējais savas vecāka bērna elements.
  • :nth-child(n) - n-tais savas vecāka bērna elements.
  • :first-of-type - pirmais savas sugas elements starp bērniem.
  • :last-of-type - pēdējais savas sugas elements starp bērniem.

• Citas:

  • :empty - elements, kam nav bērnu vai teksta.
  • :not(selector) - elementi, kas neatbilst norādītajam selektoram.

Sintakse:

selector:pseudo-class {
  property: value;
}

Piemērs lietošanai:

/* Teksta krāsas maiņa, novietojot peles rādītāju virs rindkopas */
p:hover {
  color: blue;
}

/* Stils pirmajam saraksta elementam */
li:first-child {
  font-weight: bold;
}

Pseidonoklasēs paplašina selektoru iespējas, ļaujot izveidot dinamiskākas un interaktīvākas saskarnes bez JavaScript, izmantojot vienkāršas stila izmaiņas.