Pseudoklasy

Specyfikacja CSS przewiduje kilka ściśle określonych klas, pozwalających na formatowanie niektórych elementów dokumentu. Do najpopularniejszych z całą pewnością zaliczają się pseudoklasy odsyłaczy.

a: link
{
color:red;
}
a:visited
{
color:green;
}

Szalenie istotnym elementem w tej konstrukcji jest dwukropek, występujący pomiędzy selektorem a nazwą klasy.

Pierwsza z prezentowanych pseudoklas, a:link, odpowiada za wygląd hiperłącza, jeżeli nie zostało ono jeszcze odwiedzone. Przykładowa definicja sformatuje odnośnik za pomocą koloru czerwonego.

Element a:visited odpowiada za formatowanie hiperłącza już odwiedzonego i w naszym przypadku taki odnośnik będzie miał kolor zielony.

Oczywiście zdefiniowane pseudoklasy nie kończą się na tych dwóch zaprezentowanych powyżej i specyfikacja przewiduje jeszcze kilka dodatkowych.

Dzięki pseudoklasie a:hover możliwe jest dokonanie zmiany pewnych elementów po najechaniu na nie urządzeniem wskazującym (np. myszą). Na pewno każdy widział takie strony WWW, na których odnośniki tekstowe zmieniały kolor po najechaniu na nie kursorem myszy — to właśnie dzięki tej pseudoklasie.

Pseudoklasa a:hover nie jest obsługiwana przez stare wersje przeglądarki Netscape Navigator. Ignorują one jej działanie i element nie zmienia formatowania po najechaniu na niego kursorem myszy. Oczywiście można ją stosować, gdyż nie ma ona wpływu na sam wygląd domyślnego odnośnika.

Poniżej znajduje się przykład prostego arkusza stylów odpowiedzialnego za formatowanie wyglądu wszystkich odnośników w dokumencie XHTML/HTML.

/* definicja odsyłacza podstawowego*/
a
{
font-size:12pt;
text-decoration:none;
}
a: link
{
color:navy;
}
a:visited
{
color:green;
}
a:hover
{
color:red;
text-decoration:underline;
}

W pierwszej definicji określiłem te elementy, które są wspólne dla wszystkich odsyłaczy; następnie wpisy formatują odsyłacze przy wykorzystaniu pseudoklas i nadają im specyficzne cechy wyglądu.

Niestety, życie bywa trudne i większość nowoczesnych stron wymaga stosowania na nich odnośników o zróżnicowanej wielkości lub wyglądzie. Na szczęście w specyfikacji CSS znajdziemy sposób na różnicowanie odnośników na stronie. Do wykonania tego zadania wystarczy połączyć zdobyte wcześniej informacje o klasach oraz pseudoklasach.

Poniżej znajduje się listing arkusza stylów, w którym uwzględniono dwa rodzaje odnośników.

/* definicja odsyłacza podstawowego*/
a
{
font-size:24pt;
text-decoration:none;
}
a:link
{
co1or:navy;
}
a:visited
{
color:green;
}
a:hover
{
color:red;
text-decoration:underline;
}
/* definicja odsyłacza mniejszego*/
a.mały
{
font-size: 12pt;
}

W celu zróżnicowania rozmiaru czcionki w odnośnikach w kodzie strony należy skorzystać z klasy o nazwie mały.

<ul>
<li><a href=”http://dalowski.pl” class=”maly”>Tomasz Dalowski</a></li>
<li><a href=”http://onet.pl”>Portal Onet.pl</a></li>
<li ><a href=”http://hegon.pl”>Wydawnictwo Hegoon</a></li>
</ul>

Można również określić oddzielne formatowanie dla każdego stanu odnośnika. Poniżej znajduje się konkretny przykład.

/*normlane odnośniki*/ a
{
font-size:24pt;
text-decoration:none;
}
a:link
{
color:navy;
}
a:visited
{
color:green;
}
a:hover
{
color:red;
text-decoration:underline;
}

/*male odnośniki*/
a.mały
{
font-size: 12pt;
}
a.maly:1ink
{
color:silver;;
}

a.maly:visited
{
color:yellow;
}
a.maly:hover
{
color:black;
text-decoration:none;
}

Kolejną dostępną pseudoklasą jest :active, która pozwala nadać dowolne formatowanie elementowi po nakierowaniu na niego wskaźnika myszy i wciśnięciu przycisku, ale przed jego zwolnieniem. Pseudoklasy tej można używać jako uzupełnienia definicji odnośników, o których pisałem wcześniej lub jako elementu poprawiającego czytelność formularzy.

a:active
{
color:silver;
}

Jeżeli chcemy, by właśnie wyświetlany odsyłacz z menu był formatowany innym kolorem, to z pomocą może nam przyjść kolejna pseudoklasa o nazwie :focus. Jej definicja wygląda następująco:

a:focus
{
color:braun;
}

W drugiej specyfikacji kaskadowych arkuszy stylów znajdują się jeszcze pseudoklasy :lang oraz : first-child. Pierwsza z nowych klas z założenia miała pozwolić na formatowanie wielojęzycznych dokumentów.

<p lang=”pl”>Jak się masz</p>
<p lang=”en”>How are you</p>

Przyjrzyjmy się powyższemu listingowi, na którym zostały zadeklarowane dwa akapity. Pierwszy z nich posiada przypisany atrybut lagn=”pl” i powinien zawierać tekst w języku polskim. Drugi natomiast ustawia język akapitu jako angielski. Dla tak przygotowanego dokumentu za pomocą pseudoklasy :lang możemy w prosty sposób przypisać dowolne formatowanie.

p
{
font-size:14pt;
color:navy;
}
p:lang(pl)
{
font-weight:bold;
color:black;
}
p:lang(en)
{
font-style:italic;
}

Pseudoklasa :lang nie jest obsługiwana poprawnie przez wszystkie przeglądarki. Wśród nowych przeglądarek radzą sobie z nią Mozilla Firefox oraz Opera. Użytkownicy MS Internet Explorera kolejny raz odejdą z kwitkiem.