Jeśli zajmujesz się kodowaniem wyglądu stron www lub dopiero zaczynasz się tego uczyć to zapewne spotkałeś się z metodą wprowadzenia interakcji do elementów nawigacji, tak aby reagowały w odpowiedni sposób np. na najechanie kursora myszy.
Jeśli chcesz wiedzieć więcej to zapraszam do czytania….

Specyfikacja css’a daje nam możliwość korzystania z zawartych w jego strukturze pseudoklas, które nie wymagaja wcześniejszej deklaracji, one poprostu istieją i są dostępne dla każdego dokumentu (x)html jaki tworzysz. Przedstawia je poniższy listing.

• :first-child
• :link
• :visited
• :hover
• :active
• :focus
• :lang(n)

–
Czary z linkami – ożywianie nawigacji.

Korzystając z kilku z wymienionych selektorów możemy dostosować wygląd oraz zachowanie naszych linków na stronie, oto one:

• a:link – określa elementy, które są zwykłymi linkami
• a:visited – selektor dla linków odwiedzonych
• a:hover – ta dyrektywa mówi jak zachowa się najechany link (kursor nad polem tekstowym)
• a:active – linki aktywne.

I teraz czas na sekret stosowania powyższych selektorów, aby poprawnie działały i były interpretowane zgodnie z naszym zamysłem należy deklarować je w odpowiedniej kolejności. Najpierw ustalamy właściwość dla elementu a: a {}, następnie a:link, a:visited, a:hover, a:active. W innym razie może wystąpić konfikt deklaracji i nasz kod nie będzie funkcjonował jak należy.

Jednak to nie koniec css’owych czarów, wymienione znczniki można stosować w kombinacjach, ale pod jednym warunkiem, że zostanie zachowania kolejność jaką podałem akapit wyżej. Dla przykładu napiszmy jak to może wyglądać:

• a:link, a:visited { text-decoration: underlined; }
  
• a:hover, a:active { background-color: #000; }

Każdy element , który jest odwiedzonym (klikniętym wcześniej) linkiem zostanie podkreślony, a linki najechane i będące aktualnie wyświeltane otrzymają czarne tło (#000 == black).Z wymienionych na samym początku selektorów pozostałe oznaczają:

• :focus – tyczy się elementów np. pól formularza, które są aktywne
• :first-child – pierwsze dziecko, w kaskadzie określonej kolejnośćią DOM’u
• :lang(pl) – nada wygląd elementom dla których została zadeklarowany atrybut lang jako pl.

To wszystko, na ten temat, do usłyszenia.

~Michał Kowalski 2008