Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type

(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:

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 :nth-child :nth-last-child :nth-of-type :nth-last-of-type

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 }