Mi a pseudocsoportok a CSS-ben?

A CSS pseudo-osztályok kulcsszavak, amelyeket a szelektorokhoz adnak, hogy megjelöljenek egy speciális állapotot az elemnél. Lehetővé teszik stílusok alkalmazását az elemekre a felhasználóval való interakció, a dokumentumszerkezetben elfoglalt hely vagy más jellemzők alapján, amelyeket nem lehet kifejezni a szabványos szelektorokkal.

Pseudo-klass példák:

• Felhasználói állapotok:

  • :hover - az elem, amin a kurzor van.
  • :active - az elem, amely aktiválódik (pl. egy gomb lenyomása).
  • :focus - az elem, amely fókuszban van (pl. egy szövegmező).
  • :visited - a link, amit a felhasználó már meglátogatott.
  • :link - a link, amit még nem látogatott meg a felhasználó.

• Struktúrában elfoglalt hely:

  • :first-child - az első gyermek a szülőjénél.
  • :last-child - az utolsó gyermek a szülőjénél.
  • :nth-child(n) - a n-edik gyermek.
  • :first-of-type - az első elem a típusában a gyermekek között.
  • :last-of-type - az utolsó elem a típusában a gyermekek között.

• Egyéb:

  • :empty - olyan elem, amely nem tartalmaz gyermeket vagy szöveget.
  • :not(selector) - olyan elemek, amelyek nem felelnek meg a megadott szelektornak.

Szintaxis:

selector:pseudo-class {
  property: value;
}

Használati példa:

/* A szöveg színének megváltoztatása, ha az egérrel rámutatunk egy bekezdésre */
p:hover {
  color: blue;
}

/* Az első listaelem stílusának beállítása */
li:first-child {
  font-weight: bold;
}

A pseudo-klassok bővítik a szelektorok lehetőségeit, lehetővé téve dinamikusabb és interaktívabb felületek létrehozását anélkül, hogy JavaScriptet kellene használni egyszerű stílusváltoztatásokhoz.