Selektory pseudoklas

W tym rozdziale dowiesz się...

• Do czego przydają się pseudoklasy CSS?
• Jak zmienić wygląd odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)?
• Jak zmienić wygląd odwiedzonych odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)?
• Jak zmienić wygląd aktywnych elementów - np. odsyłaczy (odnośników hipertekstowych, hiperłączy, linków)?
• Jak zrobić podświetlany link (odsyłacz, odnośnik hipertekstowy, hiperłacze)?
• Jak zmienić wygląd pola tekstowego formularza po wybraniu przez użytkownika?
• W jaki sposób zmienić wygląd elementów, zawierających tekst w wybranym języku?
• Jak zmienić wygląd pierwszego elementu dziecka, znajdującego się wewnątrz znacznika rodzica?
• W jaki sposób połączyć kilka selektorów w jednej regule stylów CSS? Jak zmienić obramowanie obrazka po wskazaniu myszką? Jak dodać ciekawie wyglądający tekst po wskazaniu myszką?

Co to są pseudoklasy?

Style CSS normalnie są dodawane do elementów, na podstawie ich pozycji w drzewie dokumentu. Taki model nie zawsze jednak jest wystarczający. Pseudoklasy klasyfikują elementy inaczej niż po ich nazwie, atrybutach czy zawartości, tzn. w zasadzie nie są ustalane na podstawie drzewa dokumentu. Mogą być dynamiczne w tym sensie, że element "nabywa" lub "traci" pseudoklasę podczas interakcji z użytkownikiem. Przykładem jest podświetlenie elementu po wskazaniu go myszką przez użytkownika.

Wszystkie pseudoklasy można podzielić na trzy grupy:

1. Pseudoklasy linków: :link, :visited
2. Pseudoklasy dynamiczne: :active, :hover, :focus
3. Inne: :lang(), :first-child

Odsyłacz podstawowy

(interpretuje Internet Explorer, Netscape 6/Mozilla/Firefox, Opera 5)

a:link { cecha: wartość }

Polecenie pozwala nadać określone atrybuty formatowania dla wszystkich podstawowych odsyłaczy na stronie czyli takich, które nie zostały jeszcze odwiedzone przez użytkownika.

Ponieważ pseudoklasa :link odnosi się tylko do odsyłaczy, w regule stylu można pominąć selektor elementu a:

:link { cecha: wartość }

Przykład:

Jeżeli nie byłeś jeszcze na stronie głównej organizacji W3C, to ten odsyłacz powinien być pogrubiony.

Odsyłacz odwiedzony

(interpretuje Internet Explorer, Netscape 6/Mozilla/Firefox, Opera 5)

a:visited { cecha: wartość }

Polecenie pozwala nadać określone atrybuty formatowania dla wszystkich odsyłaczy, które zostały już odwiedzone przez użytkownika.

Ponieważ pseudoklasa :visited odnosi się tylko do odsyłaczy, w regule stylu można pominąć selektor elementu a:

:visited { cecha: wartość }

Przykład:

Jeżeli byłeś już na stronie głównej organizacji W3C, to ten odsyłacz powinien być pogrubiony.

Aktywacja

(interpretuje Internet Explorer - tylko dla odsyłaczy, Netscape 6/Mozilla/Firefox, Opera 5)

selektor:active { cecha: wartość }

Polecenie pozwala nadać określone atrybuty formatowania dla elementów, które zostały aktywowane przez użytkownika. Może to mieć miejsce np. kiedy użytkownik wciśnie i przytrzyma przycisk myszki na odsyłaczu - aktywacja będzie miała miejsce do momentu zwolnienia przycisku myszki.

UWAGA!
MSIE 6 obsługuje pseudolasę :active tylko dla odsyłaczy - element a. Przeglądarki takie jak Firefox czy Opera pozwalają ją przypisać praktycznie dla każdego elementu.

Kolejność deklarowania pseudoklas w arkuszu stylów przypisanych do odsyłaczy ma znaczenie. Wykonanie tego w niewłaściwy sposób może być przyczyną braku efektu podczas aktywacji czy wskazania myszką!

Prawidłowa kolejność jest następująca:

a:link { cecha: wartość }
a:visited { cecha: wartość }
a:hover { cecha: wartość }
a:active { cecha: wartość }

Przykład:

Jeżeli wciśniesz i przytrzymasz przycisk myszki nad tym odsyłaczem, to do chwili zwolnienia przycisku, będzie on pogrubiony.

Wskazanie myszką

(interpretuje Internet Explorer - tylko dla odsyłaczy, Netscape 6/Mozilla/Firefox, Opera 5)

selektor:hover { cecha: wartość }

Polecenie pozwala nadać określone atrybuty formatowania dla elementów, nad którymi znajduje się wskaźnik myszki, kiedy użytkownik jeszcze ich nie kliknął, tzn. nie zostały jeszcze aktywowane.

UWAGA!
MSIE 6 obsługuje pseudolasę :hover tylko dla odsyłaczy - element a. Przeglądarki takie jak Firefox czy Opera pozwalają ją przypisać praktycznie dla każdego elementu.

Kolejność deklarowania pseudoklas w arkuszu stylów przypisanych do odsyłaczy ma znaczenie. Wykonanie tego w niewłaściwy sposób może być przyczyną braku efektu podczas aktywacji czy wskazania myszką!

Prawidłowa kolejność jest następująca:

a:link { cecha: wartość }
a:visited { cecha: wartość }
a:hover { cecha: wartość }
a:active { cecha: wartość }

Przykład:

Jeżeli wskażesz, ale nie klikniesz ten odsyłacz myszką, to do chwili usunięcia wskaźnika myszki, będzie on pogrubiony.

Zogniskowanie

(interpretuje Netscape 6/Mozilla/Firefox, Opera 7)

selektor:focus { cecha: wartość }

Polecenie pozwala nadać określone atrybuty formatowania dla elementu (np. odsyłacza lub pola formularza), który przyjmuje w danej chwili zogniskowanie. Przykładowo dotyczy to odsyłacza, wybranego za pomocą klawisza Tabulatora czy pola formularza, w którym znalazł się kursor.

UWAGA! Polecenie nie interpretuje MSIE 6.

Przykład:

textarea:focus { color: white; background-color: black }

Kliknij tutaj lub przenieś kursor za pomocą klawisza Tabulatora, a tło w tym polu stanie się czarne natomiast tekst biały.

Jeśli używasz przeglądarki MSIE 6.0, prawdopodobnie nie zobaczysz żadnego efektu.

Atrybut języka

(interpretuje Mozilla/Firefox i Opera 7.5)

selektor:lang(język) { cecha: wartość }

Polecenie pozwala nadać określone atrybuty formatowania dla elementów, którym został nadany z poziomu (X)HTML atrybut języka lang="..." [zobacz: Skróty nazw języków]. Różnica pomiędzy selektorem atrybutu [lang|="..."] a pseudoklasą :lang(...) polega na tym, że w pierwszym przypadku element musi mieć bezpośrednio przypisany atrybut lang="...", podczas gdy użycie pseudoklasy pozwala na bardziej inteligentny wybór - uwzględniając dziedziczenie języka określonego przez inne źródła, tj. nagłówek HTTP, znacznik <meta />, propagację atrybutu lang="..." przypisanego dla elementu nadrzędnego:

<body lang="pl">
	<p>Ten akapit jest napisany w języku polskim.<p>
</body>

/* Ta reguła zostanie zastosowana: */
p:lang(pl) { color: red }
/* Ta reguła nie zostanie zastosowana: */
p[lang|="pl"] { color: blue }

UWAGA! Polecenie nie interpretuje MSIE 6.

Przykład:

Po wpisaniu w arkuszu stylów:

p:lang(en) { color: red }
div:lang(en) { border: 1px solid red }

a następnie w kodzie źródłowym:

<p lang="en">1. This is paragraph with attribute <b>lang="en"</b>.</p>
<p lang="en-us">2. This is paragraph with attribute <b>lang="en-us"</b>.</p>
<div lang="en">This is block with attribute <b>lang="en"</b>...
	<p>3. This is paragraph inside block, but without attribute lang.</p>
	<p lang="pl">4. To jest akapit wewnątrz bloku, który posiada atrybut <b>lang="pl"</b> i dlatego jego wygląd nie zmieni się, pomimo że blok nadrzędny posiada atrybut lang="en".</p>
...and this is end of block.</div>

Na ekranie powinniśmy otrzymać pierwsze trzy akapity napisane kolorem czerwonym, a ostatni bez zmian:

1. This is paragraph with attribute lang="en".

2. This is paragraph with attribute lang="en-us".

1. Pierwszy akapit ma bezpośrednio przypisany atrybut lang="en",
2. drugi lang="en-us" (zwróć uwagę, że pseudoklasa :lang() obsługuje łączniki w skrótach nazw języków - np. en-us),
3. trzeci nie ma atrybutu lang, ale znajduje się wewnątrz bloku z atrybutem lang="en",
4. ostatni akapit również znajduje się w tym bloku, ale posiada przypisany oddzielnie atrybut lang="pl" i tylko ten jeden akapit nie jest czerwony.

Pierwsze dziecko

(interpretuje Netscape 6/Mozilla/Firefox i Opera 7.2)

1. Dowolny rodzic:

   dziecko:first-child { cecha: wartość }

2. Określony rodzic:

   rodzic > dziecko:first-child { cecha: wartość }

Pierwsze z poleceń pozwala nadać określone atrybuty formatowania dla elementów, będących pierwszym dzieckiem dowolnego innego elementu - o jeden rząd niżej w hierarchii drzewa dokumentu. Rodzaj znacznika rodzica nie ma w tym przypadku znaczenia. Natomiast drugie polecenie pozwala dodatkowo określić nazwę znacznika rodzica.

UWAGA! Polecenie nie interpretuje MSIE 6.

Przykład:

Po wpisaniu w arkuszu stylów:

b:first-child { color: red }

a w dowolnym miejscu strony:

<p>To jest akapit, wewnątrz którego znajduje się <b>pierwsze pogrubienie (powinno być czerwone)</b> oraz <b>drugie pogrubienie (nie powinno być czerwone)</b>.</p>

na ekranie powinniśmy otrzymać tekst, w którym zawiera się pogrubienie koloru czerwonego:

To jest akapit, wewnątrz którego znajduje się pierwsze pogrubienie (powinno być czerwone) oraz drugie pogrubienie (nie powinno być czerwone).

Zwróć uwagę, że zwykły tekst znajdujący się na początku rodzica, przed pierwszym dzieckiem, nie ma wpływu na działanie tego selektora. Dzieje się tak dlatego, gdyż tzw. anonimowy tekst nie jest częścią drzewa dokumentu.

Dla reguły w arkuszu stylów:

p > b:first-child { color: red }

odpowiednie atrybuty otrzyma pogrubienie (znacznik b), będący pierwszym dzieckiem elementu p. Jeśli będzie się on zawierał w innym znaczniku, jego wygląd nie zostanie zmieniony:

To jest akapit, a to pogrubienie, czyli pierwsze dziecko (powinno być czerwone), wewnątrz tego akapitu.

To jest akapit, a to pochylenie, czyli pierwsze dziecko (nie powinno być czerwone, ponieważ nie jest pogrubieniem), wewnątrz tego akapitu. Tutaj z kolei jest pogrubienie (nie powinno być czerwone), ale drugie nie pierwsze dziecko.

To jest akapit, a to pochylenie i pogrubienie (nie powinno być czerwone), wewnątrz pochylenia.

Inny przykład:

p:first-child b { color: red }

Odpowiednie cechy otrzyma znacznik b, będący potomkiem elementu p, który z kolei jest czyimś pierwszym dzieckiem (nie ma znaczenia czyim), np.:

<div>
	<p>To jest akapit (pierwsze dziecko) wewnątrz bloku, a to jest <i>pochylenie, wewnątrz którego znajduje się <b>pogrubienie (powinno być czerwone)</b></i>.</p>
</div>

Jeśli używasz MSIE 6.0, prawdopodobnie nie zobaczysz żadnego efektu.

Łączenie selektorów

Na koniec warto wspomnieć o jeszcze jednej przydatnej własności selektorów CSS. Jak się można było przekonać, rodzajów selektorów jest bardzo wiele - każdy przeznaczony do innego celu. Co jednak zrobić, jeżeli potrzebujemy w jednej regule stylu zastosować kilka selektorów prostych? Czy jest to w ogóle możliwe? Oczywiście, że tak. Wystarczy po prostu wpisać je jeden po drugim (bez żadnych odstępów) w następującej kolejności:

1. selektor typu lub selektor uniwersalny
2. selektory atrybutów, selektor identyfikatora, selektor klasy lub selektory pseudoklas (w dowolnej kolejności)
3. selektory pseudoelementów

Zespół selektorów z punktu 1 i 2 nazywamy selektorem prostym. W jednej regule może wystąpić kilka selektorów prostych - każdy rozdzielony przez tzw. kombinator, tj. znaki spacji, ">" lub "+", które są wykorzystywane przy tworzeniu selektorów: potomka, dziecka i braci. Selektor pseudoelementów może się znajdować tylko za ostatnim selektorem prostym w regule stylu.

Przykład:

a.przyklad_selektory:hover { font-weight: bold }

Taka reguła kojarzy każdy element typu a (czyli odsyłacz), który będzie posiadał klasę class="przyklad_selektory", kiedy zostanie on wskazany myszką:

Wskaż ten odsyłacz myszką: class="przyklad_selektorow". A tutaj jest odsyłacz bez klasy.

Taki sposób tworzenia selektora odsyłaczy jest szczególnie przydantny, ponieważ zwykle chcemy część odnośników na stronie wystylizować inaczej, jeżeli chodzi o ich podświetlanie po wskazaniu myszką. Mogą to być np. linki z menu, które powinny wyglądać inaczej niż normalne hiperłącza w tekście.

Zmiana koloru obramowania obrazka po wskazaniu go myszką:

img.przyklad_selektory2 { border: 5px solid black }
a:hover img.przyklad_selektory2 { border: 5px solid red }

Wskaż poniższy obrazek myszką:

Ten sposób powinien działać również w przeglądarce Microsoft Internet Explorer 5.0 lub nowszej.

Inny ciekawy przykład - tym razem z automatycznym generowaniem zawartości:

a.przyklad_selektory3:hover:after { content: "Rollover"; position: absolute; color: #000; background-color: #eee; font-size: 10px; border-width: 1px 2px 2px 1px; border-style: solid; border-color: #888; padding: 1px 5px }

Jeśli wskażesz ten odsyłacz myszką, powinien pojawić się zaraz za nim nowy element z napisem "Rollover" (użytkownicy przeglądarki MSIE 6.0 prawdopodobnie nie zobaczą rezultatu).

A oto bardziej zaawansowany przykład:

div.przyklad_selektory4 > ul:first-child[dir="ltr"]:lang(pl) + p[title]:first-letter { color: red; font-weight: bold; font-size: larger }

W powyższej regule stylów możemy wyróżnić następujące selektory proste:

• div.przyklad_selektory4
• ul:first-child[dir="ltr"]:lang(pl)
• p[title]:first-letter

• Selektory pseudoelementów
• Czcionki

• Do góry
• Strona główna