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?
• Jak zmienić wygląd ostatniego elementu dziecka, znajdującego się wewnątrz znacznika rodzica?
• Jak zmienić wygląd elementu dziecka, który nie ma braci?
• W jaki sposób zmienić wygląd tylko pierwszego elementu określonego typu?
• Jak zmienić wygląd odnośników (odsyłaczy, linków) do etykiety (kotwica)?
• Jak zmienić wygląd pól (kontrolek) formularza, które są zablokowane (wyszarzone)?
• Jak zmienić wygląd pól (kontrolek) formularza, które są zablokowane do zapisu?
• Jak zmienić wygląd pól (kontrolek) formularza, które są zaznaczone?
• Jak zmienić wygląd domyślnego przycisku formularza lub domyślnej opcji do wyboru?
• W jaki sposób zmienić sposób formatowania elementów, które nie zawierają żadnej treści?
• W jaki sposób za pomocą CSS odnieść się do korzenia drzewa dokumentu?
• Jak zmienić wygląd parzystych lub nieparzystych wierszy tabeli? Jak pokolorować co trzeci wiersz?
• W jaki sposób zmienić wygląd wszystkich elementów z wyjątkiem podanych?
• 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ą?
• Jak określić ważność różnych selektorów w tym samym arkuszu stylów, odnoszących się do tych samych elementów i własności?

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ć w następujący sposób:

1. Pseudoklasy dynamiczne
   • Pseudoklasy linków: :link, :visited
   • Pseudoklasy akcji użytkownika: :active, :hover, :focus
2. Pseudoklasa etykiety: :target
3. Pseudoklasa języka: :lang()
4. Pseudoklasy interfejsu użytkownika:
   • :enabled, :disabled
   • :checked
5. Pseudoklasy strukturalne:
   • :root
   • :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type()
   • :first-child
   • :last-child
   • :only-child
   • :first-of-type, :last-of-type, :only-of-type
   • :empty
6. Pseudoklasa negacji: :not()

Odsyłacz podstawowy

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

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

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 7.0 i starsze obsługuje pseudoklasę :active tylko dla odsyłaczy - element a. Przeglądarki takie jak Firefox, Opera czy Chrome 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ą

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 pseudoklasę :hover tylko dla odsyłaczy - element a. Przeglądarki takie jak Firefox, Opera czy Chrome oraz MSIE 7.0 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

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 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład:

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

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

Atrybut języka

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 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

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

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 (od wersji 7 wszystko jest już w porządku).

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.

Ostatnie dziecko

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

1. Dowolny rodzic:

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

2. Określony rodzic:

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

Pierwsze z poleceń pozwala nadać określone atrybuty formatowania dla elementów, będących ostatnim 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.

Przykład:

Po wpisaniu w arkuszu stylów:

b:last-child { color: red }

a w dowolnym miejscu strony:

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

Jedyne dziecko

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

1. Dowolny rodzic:

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

2. Określony rodzic:

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

Polecenie pozwala nadać określone atrybuty formatowania dla elementu, który jest dzieckiem innego elementu - o jeden rząd niżej w hierarchii drzewa dokumentu, ale tylko jeśli rodzic nie ma już innych dzieci.

Przykład:

Po wpisaniu w arkuszu stylów:

b:only-child { color: red }

otrzymamy na stronie:

Pseudoklasy typu

(CSS 3 - interpretuje Internet Explorer 9, Firefox 3, Opera, Chrome)

1. Pierwszy element wybranego typu:

   selektor:first-of-type { cecha: wartość }

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

2. Ostatni element wybranego typu:

   selektor:last-of-type { cecha: wartość }

   rodzic > dziecko:last-of-type { cecha: wartość }

3. Jedyny element wybranego typu:

   selektor:only-of-type { cecha: wartość }

   rodzic > dziecko:only-of-type { cecha: wartość }

Załóżmy, że mamy na stronie listę definicyjną itp.), która - jak wiemy - składa się ze znaczników terminów (DT) i definicji tych terminów (DD). Chcielibyśmy zmienić sposób formatowania tylko pierwszej definicji listy. Oczywiście można to zrobić nadając mu klasę. Nie jest to jednak najlepsze rozwiązanie, ponieważ niepotrzebnie zwiększa rozmiar dokumentu, a przy tym jeśli w przyszłości zrezygnujemy z takiego formatowania (lub jedna ze skórek nie będzie go wymagać), zbędna klasa zacznie zaśmiecać kod. Jednocześnie nie możemy się posłużyć selektorem pierwszego dziecka, gdyż pierwszym dzieckiem listy będzie znacznik terminu (DT), a nie definicja (DD). Problem rozwiązują podane wyżej selektory, ponieważ pozwalają wybrać tylko elementy określonego typu.

Nie obsługuje MSIE 8.0 ani Firefox 2!

Przykład:

Po wpisaniu w arkuszu stylów:

dl > dd:first-of-type { font-weight: bold } /* wytłuszczenie */
dl > dt:last-of-type { font-style: italic } /* kursywa */
dl > dt:only-of-type { text-decoration: underline } /* podkreślenie */

a w dowolnym miejscu strony:

<dl>
<dt>Termin 1</dt><dd>Definicja 1</dd>
<dt>Termin 2</dt><dd>Definicja 2</dd>
<dt>Termin 3</dt><dd>Definicja 3</dd>
</dl>
<dl>
<dt>Termin 1</dt><dd>Definicja 1</dd>
</dl>

na stronie powinniśmy otrzymać wykaz, w którym tekst pierwszego punktu będzie pogrubiony, a ostatniego - pochylony:

Termin 1

Definicja 1

Termin 2

Definicja 2

Termin 3

Definicja 3

Termin 1

Definicja 1

Zwróć uwagę, że tylko termin drugiej z list jest podkreślony, ponieważ pierwsza lista posiada więcej niż jeden element <dt>...</dt>. Jednocześnie, ponieważ jedyny termin drugiej listy jest zarazem ostatnim takim elementem, przyjmie również określony wcześniej dodatkowy sposób formatowania - kursywę. Natomiast jedyna definicja drugiej listy jest zarazem na niej pierwsza, więc będzie pogrubiona.

Etykieta

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

selektor:target { cecha: wartość }

Czasami podział serwisu na podstrony jest niewystarczający. Zdarza się, że jeden artykuł jest podzielony dodatkowo na niewielkie sekcje - zbyt małe, aby tworzyć z każdej z nich osobną podstronę. Chcielibyśmy jednak mieć możliwość odesłania czytelnika bezpośrednio do podanej sekcji, żeby nie musiał jej szukać "ręcznie". W takiej sytuacji stosuje się etykiety (np.: <h2 id="nazwa_etyiety">Nazwa sekcji</h2>). Do takich etykiet można później tworzyć odsyłacze. Problemem takiego rozwiązanie może być fakt, że jeśli czytelnik przewinie stronę, może mieć problemy z późniejszym odszukaniem etykiety, do której pierwotnie został skierowany. Prezentowane tutaj polecenie pozwala wyróżnić wizualnie właśnie taką etykietę, podczas gdy ewentualne pozostałe etykiety na tej samej podstronie pozostaną bez zmian.

Przykład:

Po wpisaniu w arkuszu stylów:

:target { font-weight: bold }

a w dowolnym miejscu strony:

<span id="przyklad_etykieta1">etykieta "przyklad_etykieta1"</span>, <span id="przyklad_etykieta2">etykieta "przyklad_etykieta2"</span>
<p><a href="#przyklad_etykieta1">odsyłacz "#przyklad_etykieta1"</a>, <a href="#przyklad_etykieta2">odsyłacz "#przyklad_etykieta2"</a></p>

po kliknięciu linku do danej etykiety, zostanie ona pogrubiona (w tym czasie druga etykieta nie będzie pogrubiona):

etykieta "przyklad_etykieta1", etykieta "przyklad_etykieta2"

Aby przetestować, kliknij w poniższe linki:

odsyłacz "#przyklad_etykieta1", odsyłacz "#przyklad_etykieta2"

Blokada

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

1. Pole zablokowane:

   selektor:disabled { cecha: wartość }

2. Pole odblokowane:

   selektor:enabled { cecha: wartość }

Pola formularza mogą znajdować się w wielu stanach - jednym z nich jest blokada kontrolki. Zablokowane pole w większości przeglądarek wyświetlane jest w formie wyszarzonej. Użytkownik nie może do niego wpisywać żadnego tekstu ani go włączyć (w przypadku kontrolek typu przełącznik). Blokadę ustala się poprzez przypisanie atrybutu disabled="disabled". W odróżnieniu od pól w stanie tylko do odczytu (atrybut readonly="readonly"), pola zablokowane nie są w ogóle wysyłane w formularzu. Pole odblokowane to natomiast takie, które nie posiada atrybutu disabled (domyślnie).

Przykład:

Po wpisaniu w arkuszu stylów:

input:disabled { border: 1px solid blue }
input:enabled { border: 1px solid red }

a w dowolnym miejscu strony:

<form action="?">
	<input type="text" value="Zablokowane" disabled="disabled" />
	<input type="text" value="Odblokowane" />
</form>

otrzymamy dwie tekstowe kontrolki formularza - pierwsza z niebieskim obramowaniem (zablokowana), a druga z czerwonym (odblokowana):

Tylko do odczytu

(CSS 3 - interpretuje Opera, Chrome)

1. Pole tylko do odczytu:

   selektor:read-only { cecha: wartość }

2. Pole do odczytu i do zapisu:

   selektor:read-write { cecha: wartość }

Niektóre pola formularza (pole tekstowe, hasło, obszar tekstowy) mogą być zablokowane w taki sposób, że użytkownik nie będzie mógł zmienić ich wartości. Mimo tego, w odróżnieniu od pól całkowicie zablokowanych (z przypisanym atrybutem disabled="disabled"), wartości z pól zablokowanych do zapisu będą normalnie wysłane z formularzem. Biorąc pod uwagę, że wiele przeglądarek w żaden sposób nie wyróżnia graficznie pól, które zostały oznaczone jako tylko do odczytu, nieświadomy tego użytkownik może bez końca próbować zmienić ich zawartość. Z tego punktu widzenia bardzo ważnym może okazać się graficzne wyróżnienie za pomocą CSS pól tylko do odczytu.

Przykład:

Po wpisaniu w arkuszu stylów:

input:read-only { border: 1px solid blue }
input:read-write { border: 1px solid red }

a w dowolnym miejscu strony:

<form action="?">
	<input type="text" value="Tylko do odczytu" readonly="readonly" />
	<input type="text" value="Do odczytu i do zapisu" />
</form>

otrzymamy dwie tekstowe kontrolki formularza - pierwsza z niebieskim obramowaniem (zablokowana), a druga z czerwonym (odblokowana):

Zaznaczenie

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

selektor:checked { cecha: wartość }

Niektóre z pól formularzy pełnią rolę przełączników - można je zaznaczać i odznaczać. W związku z tym może się okazać przydatne dodatkowe wizualne wyróżnienie tych kontrolek, które użytkownik zaznaczył.

Zaznaczenie dla opcji listy rozwijalnej obsługuje tylko Firefox.

Przykład:

Po wpisaniu w arkuszu stylów:

input:checked, option:checked { margin-left: 30px }

a w dowolnym miejscu strony:

<form action="?">
	<fieldset>
	<input type="radio" checked="checked" name="pole_opcji" />
	<input type="radio" name="pole_opcji" />
	</fieldset>
	<fieldset>
	<input type="checkbox" checked="checked" />
	<input type="checkbox"  />
	</fieldset>
	<select size="3">
	<option selected="selected">Opcja 1</option>
	<option>Opcja 2</option>
	<option>Opcja 3</option>
	</select>
</form>

otrzymamy formularz, w którym zaznaczone pola mają dodatkowy margines z lewej strony (aby to sprawdzić zmień zaznaczenie wybranych kontrolek):

Opcja 1Opcja 2Opcja 3

Zaznaczona opcja listy rozwijalnej (ostatnia z powyższych kontrolek) będzie wyróżniona najprawdopodobniej tylko w przeglądarce Firefox.

Domyślne

(CSS 3 - interpretuje Firefox 3, Opera 12-)

selektor:default { cecha: wartość }

Niektóre elementy formularza mogą oznaczać domyślną akcję. Na przykład przycisk wysłania formularza powinien być domyślnym. Mimo iż w formularzu może się również znajdować przycisk czyszczenia danych, po wciśnięciu klawisza Enter w dowolnym polu tekstowym, formularz zostanie wysłany, a nie wyczyszczony. Podobnie grupa pól opcji, pola wyboru czy menu rozwijalne mogą mieć zaznaczone pewne opcje. Jeśli wyślemy formularz bez dokonywania w nim zmian, opcje domyślnie zaznaczone zostaną z nim wysłane. Przedstawiony tutaj selektor pozwala w dowolny sposób wyróżnić takie domyślne elementy. Dzięki temu jeśli użytkownik wybierze inną opcję, zawsze będzie widział, która była opcją domyślą, aby ewentualnie do niej wrócić.

Nie obsługuje MSIE 9.0 ani Firefox 2! Opera obsługuje tylko domyślne pola opcji i wyboru. Chrome obsługuje tylko domyślny przycisk wysłania formularza.

Przykład:

Po wpisaniu w arkuszu stylów:

input:default, option:default, button:default { margin-left: 30px }

a w dowolnym miejscu strony:

<form action="?">
	<fieldset>
	<input type="radio" checked="checked" name="pole_opcji" class="przyklad_domyslne" />
	<input type="radio" name="pole_opcji" class="przyklad_domyslne" />
	</fieldset>
	<select size="3">
	<option selected="selected" class="przyklad_domyslne">Opcja 1</option>
	<option class="przyklad_domyslne">Opcja 2</option>
	<option class="przyklad_domyslne">Opcja 3</option>
	</select>
	<div>
	<button type="submit">Wyślij</button>
	<button type="reset">Wyczyść</button>
	</div>
</form>

otrzymamy formularz, w którym domyślne kontrolki mają dodatkowy margines z lewej strony:

Opcja 1Opcja 2Opcja 3

Wyślij Wyczyść

Pusty element

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

selektor:empty { cecha: wartość }

Zdarza się, że w dokumencie (X)HTML znajdują się elementy, które nie zawierają żadnej treści, ani dzieci. Możemy mieć z tym do czynienia w przypadku elementów, które z definicji nie posiadają znacznika zamykającego (BR, HR, IMG, INPUT), ale również gdy po prostu nie wstawimy do znacznika żadnej treści. Dzięki opisywanemu tutaj selektorowi można nadać takim elementom odrębne formatowanie.

Wstawianie pustych znaczników do kodu źródłowego nie ma wielkiego sensu semantycznego, ponieważ ich przeznaczeniem jest oznaczanie treści.

Przykład:

Po wpisaniu w arkuszu stylów:

p:empty { background-color: red; width: 100%; height: 1em }

a w dowolnym miejscu strony:

<p></p>
<p> </p>
<p><b></b></p>
<p>To jest akapit</p>

otrzymamy cztery akapity, z których tylko pierwszy element (pusty) powinien mieć ustawione tło koloru czerwonego:

To jest akapit

Zwróć uwagę, że drugi akapit (zawierający tylko spację) ani trzeci akapit (zawierający tylko pusty element-dziecko), nie otrzymały zmienionego formatowania.

---

Przykład z użyciem elementu, który nie posiada znacznika zamykającego:

img:empty { border: 1px solid red }

Korzeń

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

:root { cecha: wartość }

Każdy dokument (X)HTML ma w drzewie dokumentu dokładnie jeden korzeń, tzn. element najbardziej nadrzędny, który nie ma żadnego rodzica, za to zawiera w sobie (bezpośrednio lub poprzez zagnieżdżenie) wszystkie inne elementy dokumentu. W języku (X)HTML korzeniem jest zawsze element HTML, zatem selektor ten jest w tym przypadku raczej mało przydatny, ponieważ ten sam efekt uzyskamy poprzez użycie najprostszego selektora typu:

html { cecha: wartość }

Nie zapominajmy jednak, że CSS nadaje się do stylizowania również dokumentów XML, gdzie nie ma żadnego wymogu co do nazwy elementu-korzenia.

Przykład:

Po wpisaniu w arkuszu stylów:

:root p { color: red }

a w dowolnym miejscu strony:

<p>To jest akapit</p>

powinniśmy otrzymać tekst koloru czerwonego:

To jest akapit

Pseudoklasy cykliczne

(CSS 3 - interpretuje Internet Explorer 9, Firefox 3, Opera, Chrome)

1. Dzieci:

   dziecko:nth-child(cykl)

   rodzic > dziecko:nth-child(cykl)

2. Dzieci - począwszy od ostatniego:

   dziecko:nth-last-child(cykl)

   rodzic > dziecko:nth-last-child(cykl)

3. Elementy wybranego typu:

   selektor:nth-of-type(cykl)

   rodzic > dziecko:nth-of-type(cykl)

4. Elementy wybranego typu - począwszy od ostatniego:

   selektor:nth-last-of-type(cykl)

   rodzic > dziecko:nth-last-of-type(cykl)

W celu poprawienia czytelności danych, często spotyka się obszerne tabele, w których kolejne nieparzyste wiersze są pokolorowane w odmienny sposób niż parzyste. Taki rodzaj formatowania można oczywiście uzyskać dodając co drugiemu wierszowi odpowiednią klasę. Gdy jednak wierszy jest sporo, zaczyna to być niewygodne. A co jeśli jutro zażyczymy sobie inny sposób kolorowania wierszy tej tabeli - w cyklu co trzy, a nie co dwa elementy? Dzięki przedstawionym tutaj selektorom można to uzyskać bez najmniejszego trudu.

Cykl

Aby wyznaczyć przebieg cyklu, musimy najpierw ponumerować (w myślach) kolejne elementy (np. wiersze tabeli). Numerację rozpoczynamy od liczby jeden (a nie jak w wielu językach programowania od zera). W ten sposób pierwszy wiersz będzie oznaczony indeksem nieparzystym, drugi parzystym, trzeci znów nieparzystym itd. W tym kontekście cykle w postaci odd (nieparzyste) oraz even (parzyste) są chyba dość jasne. Mniej oczywiste może być wykorzystanie tajemniczych wzorów: An+B itp. W celu wyznaczenia cyklu za pomocą wzoru najpierw podstawiamy pod wielkości A i B liczby całkowite (dodatnie, ujemne lub zero) - przyjmijmy dla przykładu wzór: 2n+1 (wprost w takiej postaci należy wpisać go do selektora). Teraz, kiedy znamy już konkretną postać wzoru, zaczynamy podstawiać do niego pod n kolejne liczby naturalne rozpoczynając od zera, a wynik całego wyrażenia określi kolejne numery wierszy, które otrzymają podany sposób formatowania:

A=2, B=1

n	wzór	wynik
0	2*0+1	1
1	2*1+1	3
2	2*2+1	5
itd.

Okres

Wartość A określa okres cyklu, czyli długość "skoku" pomiędzy kolejnymi elementami wybieranymi przez selektor. Podstawiając A=3 pokolorowany zostanie co trzeci wiersz, przy A=4 - co czwarty itd. Podając ujemną wartość możemy poruszać się w tył. Natomiast podstawiając wartość zero (lub pomijając w ogóle człon An we wzorze), wybierzemy co najwyżej jeden element - o numerze wskazanym przez wartość B.

Przesuniecie początkowe

Wartość B odpowiada za przesunięcie początkowe, tzn. od którego numeru elementu selektor zaczyna działać. Podając B=2 kolorowanie zostanie rozpoczęte od drugiego wiersza (wcześniejsze zostaną pominięte), przy B=3 - od trzeciego itd. Możliwe jest również wstawienie liczby ujemnej, co spowoduje rozpoczęcie odliczania jeszcze zanim rozpoczną się widoczne elementy listy, przy czym jeśli wynik po podstawieniu otrzymamy mniejszy lub równy zero, nie będzie to miało żadnego widocznego skutku. Podstawienie wartości B=0 po prostu rozpocznie odliczanie od elementu zerowego, przy czym widoczne skutki możemy zobaczyć dopiero przy drugim przebiegu cyklu, gdyż element zero nie istnieje.

Odwrotna kolejność

Wszystkie powyższe rozważania są słuszne dla selektora :nth-child oraz :nth-of-type. Pierwszy z nich wybiera dzieci, a drugi elementy podanego typu [porównaj: pierwsze dziecko i pseudoklasy typu]. Natomiast w przypadku selektorów :nth-last-child oraz :nth-last-of-type sposób wyliczania przebiegu cyklu jest analogiczny, ale numerowanie elementów rozpoczynamy nie od pierwszego, lecz od ostatniego i posuwamy się do tyłu. Czyli ostatni element oznaczymy indeksem jeden, przedostatni - dwa itd.

Zapis

Gdy A=1 lub A=-1 wpisywanie liczby przed n można pominąć:

selektor:nth-child(-n) { cecha: wartość }

Jawne oznaczanie liczby A dodatnim znakiem nie jest wymagane, ale można to zrobić:

selektor:nth-child(+2n) { cecha: wartość }

Białe znaki (np. spacje) są dozwolone po otworzeniu i przed zamknięciem nawiasu selektora:

selektor:nth-child( odd ) { cecha: wartość }

Można je również wstawiać przed i po znaku sumy bądź różnicy we wzorze:

selektor:nth-child(-2n + 10) { cecha: wartość }

Białe znaki są jednak niedozwolone po symbolach oznaczających znak liczby. Nie można również rozdzielać nimi n od poprzedzającej liczby ani znaku:

/* Niepoprawnie: */
selektor:nth-child(- 2 n) { cecha: wartość }

Wartości B nie można oznaczać ujemnym znakiem - w takim przypadku trzeba po prostu zamienić działanie sumy na różnicę:

/* Niepoprawnie: */
selektor:nth-child(2n + -1) { cecha: wartość }
/* Poprawnie: */
selektor:nth-child(2n - 1) { cecha: wartość }

---

Przykład:

Nieparzyste i parzyste wiersze:

tbody > tr:nth-child(odd) { color: white; background-color: gray } /* biały na szarym */
tbody > tr:nth-child(even) { color: gray; background-color: white } /* szary na białym */

Co trzecie wiersze:

tbody > tr:nth-child(3n+1) { color: yellow; background-color: red } /* żółty na czerwonym */
tbody > tr:nth-child(3n+2) { color: maroon; background-color: orange } /* kasztanowy na pomarańczowym */
tbody > tr:nth-child(3n+3) { color: red; background-color: yellow } /* czerwony na żółtym */

Co drugi wiersz poczynając od trzeciego:

tbody > tr:nth-child(2n+3) { color: white; background-color: gray }

Co trzeci wiersz poczynając od -1 (wiersze -1 i 0 w rzeczywistości nie istnieją):

tbody > tr:nth-child(3n-1) { color: white; background-color: gray }

Co drugi wiersz odliczając do tyłu poczynając od czwartego:

tbody > tr:nth-child(-2n+4) { color: white; background-color: gray }

Trzeci wiersz:

tbody > tr:nth-child(3) { color: white; background-color: gray }

Nieparzyste definicje listy:

dl > dd:nth-of-type(odd) { font-weight: bold }

Nieparzyste wiersze poczynając od końca:

tbody > tr:nth-last-child(odd) { color: white; background-color: gray }

Negacja

(CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome)

selektor:not(argument) { cecha: wartość }

Wyobraźmy sobie sytuację, kiedy chcemy zmienić kolor całego tekstu na stronie z wyjątkiem np. tabelek. Moglibyśmy to zrobić, przypisując najpierw określony kolor całemu tekstowi, a następnie przywracając kolor domyślny wszystkim tabelom. Łatwiej będzie jednak takie działanie połączyć w pojedynczym selektorze negacji. Jeszcze ciekawsze efekty możemy uzyskać poprzez połączenie negacji z bardziej złożonymi selektorami - np. pokolorować wszystkie wiersze tabeli z wyjątkiem jednego, który podamy za pomocą pseudoklasy podstawionej jako argument negacji.

Selektorów negacji nie wolno zagnieżdżać, tzn. wstawiać jeden jako argument drugiego.

Przykład:

Po wpisaniu w arkuszu stylów:

ul > li:not(:first-child) { font-weight: bold }

otrzymamy wykaz, w którym wszystkie punkty z wyjątkiem pierwszego (pierwsze dziecko) powinny być pogrubione:

Łą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ą:

Taki sposób tworzenia selektora odsyłaczy jest szczególnie przydatny, 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. Jeżeli jednak chcemy zmienić wygląd wszystkich odsyłaczy znajdujących się w jednym miejscu - np. w menu serwisu - wygodniej jest użyć następującej reguły:

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

Teraz wystarczy wstawić:

<div class="przyklad_selektory2">
	<a href="?">Link1</a>
	<a href="?">Link2</a>
	<a href="?">Link3</a>
</div>

aby zmienić wygląd po wskazaniu wszystkich odsyłaczy z tego bloku, bez wpływu na pozostałe znajdujące się na stronie:

Zmiana koloru obramowania obrazka po wskazaniu go myszką:

img.przyklad_selektory3 { border: 5px solid black }
a:hover img.przyklad_selektory3 { 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_selektory4: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 }

A oto bardziej zaawansowany przykład:

div.przyklad_selektory5 > 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_selektory5
• ul:first-child[dir="ltr"]:lang(pl)
• p[title]:first-letter

Szczegółowość selektorów

Sposób formatowania każdego elementu strony może być określony w kilku miejscach. O tym, jak ostatecznie będzie wyglądał wybrany element, decydują zasady kaskadowości stylów. Pozostaje jeszcze określenie ważności reguł stylów, znajdujących się w tym samym arkuszu CSS. Panuje tutaj dość intuicyjna zasada mówiąca, że bardziej szczegółowe selektory są ważniejsze.

1. Selektory identyfikatora mają pierwszeństwo przed innymi, nawet jeśli znajdują się na początku arkusza CSS. Im więcej identyfikatorów zawiera selektor, tym jest bardziej szczegółowy, a więc ważniejszy.

   Przykład:

   Tekst, przedstawionego poniżej akapitu, będzie czerwony (red):

   <div id="kontener">
   	<p id="identyfikator">...</p>
   </div>

   div#kontener p#identyfikator { color: red }
   p#identyfikator { color: green }
   p { color: black }

2. Gdy rozpatrywane selektory nie zawierają żadnych identyfikatorów albo zawierają ich tyle samo, o ważności decyduje liczba użytych w regule klas, pseudoklas oraz atrybutów.

   Przykład:

   Tekst, przedstawionego poniżej akapitu, będzie czerwony (red):

   <p class="klasa">...</p>

   p.klasa { color: red }
   p { color: black }

3. Gdy w rozpatrywanych selektorach zarówno liczba identyfikatorów jak i klas, pseudoklas oraz atrybutów jest identyczna, bardziej szczegółowy (ważniejszy) jest selektor, który posiada więcej elementów lub pseudoelementów.

   Przykład:

   Tekst, przedstawionego poniżej akapitu, będzie czerwony (red):

   <div>
   	<p>...</p>
   </div>

   div p { color: red }
   p { color: black }

4. Gdy żaden z powyższych punktów nie pozwala określić, który selektor jest bardziej szczegółowy, ważniejsze będą te deklaracje, które zostaną umieszczone na końcu.

   Przykład:

   Tekst, określonego poniżej akapitu, będzie czerwony (red):

   p { color: black }
   p { color: green; color: red }

Przykład:

Tekst, przedstawionego poniżej akapitu, będzie czerwony (red):

<div id="kontener">
	<p class="klasa">...</p>
</div>

div#kontener p.klasa { color: lime }
div#kontener p.klasa { color: yellow; color: red }
#kontener p.klasa { color: green }
div#kontener p { color: olive }
#kontener p { color: teal }
div p.klasa { color: aqua }
p.klasa { color: blue }
.klasa { color: navy }
div p { color: purple }
p { color: fuchsia }
* { color: black }

• Selektory pseudoelementów
• Czcionki

• Do góry
• Strona główna