Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Struktura dokumentu

Selektory pseudoklas

Email Drukuj PDF

Tematy: wprowadzenie | selektory elementów | selektory atrybutów | selektory specjalne | selektory pseudoklas | selektory pseudoelementów

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, Chrome.

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, Chrome.

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, Chrome.

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, Chrome.

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, Internet Explorer 8, Chrome.

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, Internet Explorer 8, Chrome.

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 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 kursywa jako dziecko i dalszy ciąg akapitu

Interpretacja: Firefox, Opera, Internet Explorer 8, Chrome.


 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15274211