A :active, :hover és :focus pseudo-osztályok

Az interaktív böngészők a felhasználó tevékenysége nyomán egyes elemek megjelenését megváltoztathatják. Ezekhez a CSS pseuso-osztályokat rendelt.

A pseudo-osztályok a következők:

A :hover akkor érvényes, ha egy elemre a felhasználó rámutat (például az egérrel).
Az :active akkor érvényes, ha egy elem éppen aktiválásra kerül. Ez elérhető például, ha az egérrel rábökünk az elemre. Amikor az egér gombját elengedjük, akkor az elem kikerül az :active pseudo-osztályból.
A :focus akkor érvényes, ha egy elem megkapja a fókuszt. Ez elsősorban az űrlapoknál lehet érdekes: például egy űrlapon található beviteli mezőbe akkor lehet szöveget beírni, ha rendelkezik a fókusszal. Ilyenkor az adott beviteli mezőt létrehozó elem fog beletartozni a :focus pseudo-osztályba.

Például a tankönyv valamely bekezdésére kattintva, az egérgomb felengedéséig a bekezdés szövege sárga színnel jelenik meg. Ennek oka, hogy a tankönyv megjelenését előíró stíluslapban szerepel a következő szabály:

P:active { color: yellow}

Ha ebben a :active szöveget a :hover szövegre cserélnénk, akkor annak a bekezdésnek a szövege jellenne meg sárgán, amely fölött az egérmutató éppen tartózkodik.