Írja le a CSS-ben található pszeudóosztályokat és…

A pszeudoklaszok és a pszeudoelemek bővítik a CSS-szelektorok lehetőségeit, lehetővé téve stílusok alkalmazását az elemek állapota, helyzete vagy más jellemzői alapján, amelyeket nem lehet egyszerű szelektorokkal kifejezni.

Pszeudoklaszok

A pszeudoklaszok egyetlen kettős kettősponttal (:) kezdődnek. Ezeket az elem stílusának meghatározott állapotban való alkalmazására használják.

Főbb pszeudoklaszok:

:hover - az elem stílusának módosítása az egérkurzor fölé helyezésekor.
:active - az elem stílusának módosítása kattintás közben.
:focus - az elem stílusának módosítása, amikor az éppen fókuszban van (pl. linkre való átlépés vagy beviteli mezőre kattintás után).
:visited - meglátogatott link stílusának módosítása.
:link - nem meglátogatott link stílusának módosítása.
:first-child - az első gyermek elem stílusának módosítása.
:last-child - az utolsó gyermek elem stílusának módosítása.
:nth-child(n) - a n-edik gyermek elem stílusának módosítása a szülőnél. Az n lehet szám, kulcsszó (even, odd) vagy kifejezés (2n+1).
:nth-last-child(n) - a n-edik gyermek elem stílusának módosítása a szülőnél, a végéről számítva.
:not(selector) - azokat az elemeket stílusozza, amelyek nem felelnek meg a megadott szelektornak.

/* Példa pszeudoklaszt használatára */
a:hover {
  color: blue; // A link színének módosítása hover esetén
}

input:focus {
  border-color: green; // A beviteli mező keretének színének módosítása fókuszban
}

li:first-child {
  font-weight: bold; // Az első listaelem stílusozása
}

Pszeudoelemek

A pszeudoelemek két kettős kettősponttal (::) kezdődnek. Ezeket az elem egy adott részének stílusozására vagy generált tartalom beszúrására használják az elem tartalma előtt vagy után.

Főbb pszeudoelemek:

::before - generált tartalom beszúrása az elem tartalma előtt. Gyakran a content tulajdonsággal használják.
::after - generált tartalom beszúrása az elem tartalma után. Szintén a content tulajdonságot igényli.
::first-letter - az első betű stílusozása a szövegblokkban.
::first-line - az első sor stílusozása a szövegblokkban.
::selection - a felhasználó által kijelölt rész stílusozása.

/* Pszeudoelemek használatának példái */
p::first-letter {
  font-size: 2em; // Az első betű nagyítása a bekezdésben
  font-weight: bold;
}

h2::after {
  content: " ---"; // Szöveg hozzáadása a cím után
  color: gray;
}

mark::selection {
  background-color: yellow; // A kijelölt szöveg háttérszínének módosítása
  color: black;
}

Történelmileg a pszeudoklaszok egyetlen kettős kettőspontot (:) használtak a CSS2.1-gyel való visszamenőleges kompatibilitás érdekében, míg a pszeudoelemek a CSS3-ban a jobb megkülönböztetés érdekében két kettős kettőspontot (::) kezdtek használni. Ajánlott a kettős kettőspont használata a pszeudoelemekhez a modern kódban.

Összehasonlító táblázat:

Jellemző	Pszeudoklasz	Pszeudoelem
Szintaxis	`:selector`	`::selector`
Célja	Az elem állapota	Az elem része vagy generált tartalom

Írja le a CSS-ben található pszeudóosztályokat és pszeudoelemeket.