Selektory pseudoklas

[ aktualizacja 22.12.2000 ]

a. Pseudoklasy odsyłaczowe

CSS2 wyróżnia specjalne selektory dla odsyłaczy, zależnie od ich bieżącego statusu.

Selektor a:link pozwala nadać formatowanie odsyłaczowi na stronie, na przykład:

a:link {color:yellow; background: blue}

To jest odsyłacz do firmy

Interpretacja: Internet Explorer, Netscape 6, Opera 5.

Selektor a:visited nadaje formatowanie odsyłaczowi już odwiedzonemu, na przykład:

a:visited {color:green}

To jest odsyłacz do PCkuriera - jeśli byłeś już na stronie PCkuriera, odsyłacz będzie zielony.

Interpretacja: Internet Explorer, Opera 5.

b. Pseudoklasa :hover

Selektor nadaje styl elementowi, gdy urządzenie wskazujące, np. myszka, znajduje się nad elementem, ale nie aktywizuje go. Jest to szczególnie często wykorzystywane do zmiany wyglądu odsyłacza, co ułatwia czytelnikowi śledzenie, nad jakim odsyłaczem znajduje się w danym momencie kursor myszki.

Przykład:

A:hover {background:blue; color:red}

To jest odsyłacz do serwisu About.com. Gdy nasuniesz kursor myszki nad odsyłacz, zmieni się jego wygląd.

Spowoduje to, że odsyłacz mający domyślnie np. niebieski kolor na białym tle, po nasunięciu kursora zostanie wyświetlony jako biały na niebieskim tle.

Interpretacja: Internet Explorer, Netscape 6, Opera 5.

c. Pseudoklasa :active

Selektor :active formatuje we wskazany sposób aktywny w danym momencie element, np. kliknięty odsyłacz.

A:active {background:olive; color:black}

To jest odsyłacz do serwisu World Wide Web Consortium. Gdy klikniesz na odsyłaczu, zmieni się jego wygląd (czarny odsyłacz na oliwkowym tle).

Interpretacja: Internet Explorer, Netscape 6, Opera 5.

Powyższe cztery pseudoklasy powinny być umieszczane w nagłówku w podanej kolejności: link, visited, hover, active.

d. Pseudoelement :focus

Selektor :focus formatuje w wybrany sposób element, który przyjmuje w danym momencie zogniskowanie, np. kursor na danym odsyłaczu (po wybraniu go za pomocą klawisza tabulatora) czy pole formularza, w którym znalazł się kursor.

a:focus {color:blue; background:red}

To jest odsyłacz do miesięcznika Enter

:focus {color:white; background:black}

Interpretacja: Netscape 6.

Ilustracja dla użytkowników IE i Opery

Ilustracja z Netscape'a 6

e. Pseudoklasa :lang

Selektor :lang pozwala formatować elementy, które mają podany atrybut języka, np.:

p:lang(en) {font-weight:bold}

to jest akapit z atrybutem lang=en i powinien być pogrubiony

Żadna przeglądarka nie obsługuje tego selektora.

f. Pseudoklasa :first-child

Pierwszym dzieckiem elementu jest pierwszy zawarty w nim element niższego szczebla. Na przykład, pierwszym dzieckiem akapitu może być pierwszy znacznik pogrubienia.

p:first-child {color:red}

to jest akapit, a to jest pogrubienie i dalszy ciąg akapitu

Z kolei selektor

p:first-child EM {color:red}

jest zawężony, gdyż wyróżnia formatowaniem jedynie elementy EM, które są pierwszym dzieckiem jakiegoś akapitu.

to jest akapit, a to jest emfaza i dalszy ciąg akapitu

Żadna przeglądarka nie akceptuje tego selektora.