W języku CSS style są dodawane do elementów lub grup elementów na podstawie ich nazw, atrybutów lub zawartości.
Jest też inna możliwość dodawania stylu. Element nabywa lub traci styl w wyniku interacji z użytkownikiem. Przykładem mogą być odsyłacze, umieszczenie kursora nad elementem. Do takiej dynamicznej zmiany sytlu służą właśnie pseudoklasy.
Do podstawowych zaliczają się:
:link - link nieaktywny
Przykład:
A:link { color: green } |
jest równoważny
:link { color: green} |
Istnieje możliwość zmiany wyglądu wybranych odsyłaczy, np.:
A.inny:link { color: red } |
oraz w dokumencie HTML:
<a href="http://www.domena.com/" class="inny">Odsyłacz do innej strony</a> |
:visited - link odwiedzony
Przykład:
A:visited { color: yellow } |
:hover - umieszczenie kursora nad obiektem
Przykład:
A:hover { color: blue } |
:active - dotyczy odsyłacza, który został wybrany przez użytkownika; jest to okres
czasu od momentu wybrania odsyłacza (najechania wskaźnikiem myszy nad odsyłacz
i kliknięcie lewym przyciskiem myszy) do momentu przejścia do określonej
przez odsyłacz strony.
Przykład:
A:active { color: purple } |
:focus - aktualnie wybrany element formularza
Przykład:
A:focus { color: white } |
Istnieje możliwość łączenia selektorów dotyczących odsyłaczy, np.:
A:focus:hover { color: lime } |
Powyższy zapis określa kolor czcionki odsyłacza w przypadku podświetlenia odsyłacza przy użyciu klawiatury lub poprzez umieszczenie wskaźnika myszy nad odsyłaczem.