Pseudoklasy odnośników w CSS

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Pseudoklasy CSS pozwalają stylować element w zależności od jego stanu. W przypadku odnośników, czyli elementów <a>, najczęściej spotyka się pseudoklasy opisujące, czy link był odwiedzony, czy użytkownik wskazuje go myszą.

Najważniejsze pseudoklasy linków

a:link {
  color: blue;
}

a:visited {
  color: orange;
}

a:hover {
  color: red;
}

a:active {
  color: green;
}

Znaczenie:
- a:link — odnośnik, który nie był jeszcze odwiedzony,
- a:visited — odnośnik, który był już odwiedzony,
- a:hover — odnośnik, nad którym znajduje się wskaźnik myszy,
- a:active — odnośnik w momencie aktywowania, np. kliknięcia.

Przykład z pytania egzaminacyjnego

a:visited {
  color: orange;
}

Ten zapis oznacza, że odnośnik, który użytkownik już odwiedził, zostanie wyświetlony kolorem pomarańczowym.

Kolejność ma znaczenie

Dla linków często stosuje się kolejność:

a:link {}
a:visited {}
a:hover {}
a:active {}

Łatwo ją zapamiętać jako LVHA: link, visited, hover, active. Nieprawidłowa kolejność może sprawić, że niektóre style nie będą widoczne zgodnie z oczekiwaniem.

Ważne na egzaminie

Pseudoklasa :visited nie oznacza błędnego adresu URL. Oznacza wyłącznie, że dany adres znajduje się w historii odwiedzin przeglądarki użytkownika.