Pseudoklasy linków w CSS

Pseudoklasy linków pozwalają stylować hiperłącza w zależności od ich stanu. Stosuje się je najczęściej dla elementu <a>.

Najważniejsze pseudoklasy linków:

• a:link – link nieodwiedzony,
• a:visited – link odwiedzony,
• a:hover – link, nad którym znajduje się kursor myszy,
• a:active – link w momencie kliknięcia.

Przykład

a {
  color: Brown;
}

a:link {
  color: Green;
}

a:visited {
  color: Red;
}

a:hover {
  color: Yellow;
}

W tym przykładzie zwykły link ma kolor brązowy, ale zostanie on nadpisany przez bardziej konkretny stan linku. Jeśli link nie był odwiedzony, zadziała a:link i będzie zielony. Po kliknięciu linku i powrocie na stronę przeglądarka traktuje go jako odwiedzony, więc zastosuje styl a:visited, czyli kolor czerwony.

Kolejność reguł ma znaczenie

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

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

Można ją zapamiętać jako LVHA: link, visited, hover, active.

Jeśli kilka reguł CSS może dotyczyć tego samego elementu i mają podobną szczegółowość, wygrywa reguła zapisana później. Dlatego link odwiedzony po najechaniu kursorem może przyjąć kolor z a:hover, jeśli ta reguła znajduje się niżej w pliku CSS.

Wniosek egzaminacyjny

Jeżeli pytanie mówi, że użytkownik kliknął hiperłącze i wrócił na stronę, należy zwrócić uwagę na pseudoklasę :visited. Oznacza ona link odwiedzony.