Selektory pseudoklas

a. Pseudoklasa :link

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, Firefox, Opera.

b. Pseudoklasa :visited

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

a:visited {color:green}

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

Interpretacja: Internet Explorer, Opera, Firefox.

c. 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, Firefox, Opera.

d. 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, Firefox, Opera.

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

e. Pseudoklasa :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:black; background:white}

To jest odsyłacz do miesięcznika Enter

:focus {color:white; background:black}

Interpretacja: Firefox, Opera.

f. Pseudoklasa :lang

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

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

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

Interpretacja: Firefox, Opera.

g. 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 kursywa jako przykładowe "dziecko" i dalszy ciąg akapitu

Z kolei selektor

p:first-child i {color:red}

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

To jest akapit, a to jest kursywa jako dziecko i dalszy ciąg akapitu

Żadna przeglądarka nie akceptuje tego selektora.