Podstawowe pseudoklasy w CSS
19 czerwca 2005
Psudoklasy pozwalają na lekkie odświeżenie reguł CSS, bez dodawanie zbędny klas do kodu XHTML. Dodają też funkcjonalność, której normalnie byłoby szukać tylko z kodem manipulującym DOM. Pseudoklasy następują od razu po elemencie (tagu HTML, klasie albo identyfikatorze). Przykład - a:link
Zaczniemy od linków - hiperłączy. Dość często początkujący zastanawiają się jak usunąć z nich podkreślenie - wystarczy zwykła deklaracja text-decoration: none.
:link
Ta pseudoklasa przydatna jest do określania czy dany element jest linkiem. Stosuje się go w połączeniu z elementem a.
:visited
Banalna sprawa - czy link był odwiedzony. Po ludzku - czy znajduje się w historii przeglądarki.
:hover
Stan, w którym kursor myszki jest nad linkiem. Często wykorzystywany do zmiany koloru, wywoływania podkreślenia i inne takie. Internet Explorer jest przeglądarką, która rozumie :hover tylko na linkach. Tak, to wielkie ograniczenie. Można jednak wykorzystać swoją wiedzę i na przykład łącząć regułę display: block wypełnić nadrzędny element li, aby stworzyć menu, reagujące na myszkę pod IE także. Wykorzystując pseudoklasę :hover można z powodzeniem tworzyć efekty rollover, bez JavaScript. Wystarczy zadeklarować, że dany element ma zachowanie blokowe (display: block), wymiary (width, height) i tło (background: url() left top no-repeat) i zmieniać tło dla :hover.
:active
Stan aktywny. W większości przeglądarek kliknięcie na link i nie puszczenie przycisku wywołuje ten stan. Internet Explorer 6 dla Windows ma dziwny błąd związany z tą pseudoklasą - gdy klikniemy na link i wybierzemy Wstecz z paska narzędziowego, link który kliknęliśmy będzie "podświetlony" w sposób określony przez tą regułę. Cóż - czasem efekt może być ciekawy i pewnie tym kierowali się koderzy MS.
Kolejności poszczególnych pseudoklas dla linków jest ważna. Otóż powinno się najpierw stosować pseudoklasę :link, potem :visited, :hover i :active. Właśnie tak ja wylistowałem je w tekście. Niektóre starsze przeglądarki mają bardzo dziwaczne błędy z tym związane. Aby zapamiętać kolejność pseudoklas, można sobie skojarzyć ich pierwsze litery, jak radzi Jeffrey Zeldman. LV, HA! - LoVe, HA! Takie małe wyznanie. :P
:focus
Ta pseudoklasa powinna być wykorzystywana dla linków razem z :hover (a:focus, a:hover). Otóż istnieje całkiem spora grupa ludzi, która preferuje używanie klawiatury do obsługi strony. Przeskakując Tab przez linki, bez tej deklaracji połączonej z :hover, nie zmienią ich stanu.
Pseudoklasa :focus także często jest mylona z :hover podczas obsługi formularzy. Najlepszym efektem jest, gdy po najechaniu myszką (:hover) na pole formularza podświetla on się lekko, a po kliknięciu - ustawieniu fokusu (:focus) podświetla się mocniej. To tylko efekt wizualny, gorzej gdy formularz jest prawie niewidoczny i dopiero nakierowanie myszką go podświetla. Bez połączenia :focus z :hover skutkuje tym, że musimy mieć kursor myszki w polu formularza, inaczej nic nie widać. Jest to typowy błąd, którego należy unikać.
Ciąg dalszy nastąpi...
