Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type
Jak zmienić wygląd parzystych lub nieparzystych wierszy tabeli? Jak pokolorować co trzeci wiersz?
Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type
CSS 3
- Dzieci:
dziecko:nth-child(cykl)
rodzic > dziecko:nth-child(cykl)
- Dzieci - począwszy od ostatniego:
dziecko:nth-last-child(cykl)
rodzic > dziecko:nth-last-child(cykl)
- Elementy wybranego typu:
selektor:nth-of-type(cykl)
rodzic > dziecko:nth-of-type(cykl)
- Elementy wybranego typu - począwszy od ostatniego:
selektor:nth-last-of-type(cykl)
rodzic > dziecko:nth-last-of-type(cykl)
Cykl określa sposób powtarzania elementów:
- An+B
- An
- B
- (dla
n≥0
- liczba naturalna z zerem) gdzie A (okres) i B (przesunięcie początkowe) są liczbami całkowitymi (mogą być dodatnie, ujemne lub wynosić zero) - zobacz szczegółowe wyjaśnienie dalej - odd
- elementy nieparzyste (to samo co: 2n+1)
- even
- elementy parzyste (to samo co: 2n)
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:
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 :nth-child :nth-last-child :nth-of-type :nth-last-of-type
Nieparzyste i parzyste wiersze:
📋 Zaznacz kod ▶ Edytuj na żywo
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 */
Komórka 1.1 | Komórka 1.2 |
Komórka 2.1 | Komórka 2.2 |
Komórka 3.1 | Komórka 3.2 |
Komórka 4.1 | Komórka 4.2 |
Komórka 5.1 | Komórka 5.2 |
Komórka 6.1 | Komórka 6.2 |
Co trzecie wiersze:
📋 Zaznacz kod ▶ Edytuj na żywo
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 */
Komórka 1.1 | Komórka 1.2 |
Komórka 2.1 | Komórka 2.2 |
Komórka 3.1 | Komórka 3.2 |
Komórka 4.1 | Komórka 4.2 |
Komórka 5.1 | Komórka 5.2 |
Komórka 6.1 | Komórka 6.2 |
Co drugi wiersz poczynając od trzeciego:
📋 Zaznacz kod ▶ Edytuj na żywo
tbody > tr:nth-child(2n+3) { color: white; background-color: gray }
Komórka 1.1 | Komórka 1.2 |
Komórka 2.1 | Komórka 2.2 |
Komórka 3.1 | Komórka 3.2 |
Komórka 4.1 | Komórka 4.2 |
Komórka 5.1 | Komórka 5.2 |
Komórka 6.1 | Komórka 6.2 |
Co trzeci wiersz poczynając od -1 (wiersze -1 i 0 w rzeczywistości nie istnieją):
📋 Zaznacz kod ▶ Edytuj na żywo
tbody > tr:nth-child(3n-1) { color: white; background-color: gray }
Komórka 1.1 | Komórka 1.2 |
Komórka 2.1 | Komórka 2.2 |
Komórka 3.1 | Komórka 3.2 |
Komórka 4.1 | Komórka 4.2 |
Komórka 5.1 | Komórka 5.2 |
Komórka 6.1 | Komórka 6.2 |
Co drugi wiersz odliczając do tyłu poczynając od czwartego:
📋 Zaznacz kod ▶ Edytuj na żywo
tbody > tr:nth-child(-2n+4) { color: white; background-color: gray }
Komórka 1.1 | Komórka 1.2 |
Komórka 2.1 | Komórka 2.2 |
Komórka 3.1 | Komórka 3.2 |
Komórka 4.1 | Komórka 4.2 |
Komórka 5.1 | Komórka 5.2 |
Komórka 6.1 | Komórka 6.2 |
Trzeci wiersz:
📋 Zaznacz kod ▶ Edytuj na żywo
tbody > tr:nth-child(3) { color: white; background-color: gray }
Komórka 1.1 | Komórka 1.2 |
Komórka 2.1 | Komórka 2.2 |
Komórka 3.1 | Komórka 3.2 |
Komórka 4.1 | Komórka 4.2 |
Komórka 5.1 | Komórka 5.2 |
Komórka 6.1 | Komórka 6.2 |
Nieparzyste definicje listy:
📋 Zaznacz kod ▶ Edytuj na żywo
dl > dd:nth-of-type(odd) { font-weight: bold }
- Termin 1
- Definicja 1
- Termin 2
- Definicja 2
- Termin 3
- Definicja 3
- Termin 4
- Definicja 4
- Termin 5
- Definicja 5
- Termin 6
- Definicja 6
Nieparzyste wiersze poczynając od końca:
📋 Zaznacz kod ▶ Edytuj na żywo
tbody > tr:nth-last-child(odd) { color: white; background-color: gray }
Komórka 1.1 | Komórka 1.2 |
Komórka 2.1 | Komórka 2.2 |
Komórka 3.1 | Komórka 3.2 |
Komórka 4.1 | Komórka 4.2 |
Komórka 5.1 | Komórka 5.2 |
Komórka 6.1 | Komórka 6.2 |
Pytania i odpowiedzi :nth-child, :nth-of-type
Co drugie dziecko CSS?
Aby wybrać co drugie dziecko dowolnego elementu HTML za pomocą CSS, możemy użyć selektora :nth-child(2n)
. Na przykład, jeśli mamy listę <ul>
z elementami <li>
, to selektor ul > li:nth-child(2n)
zastosowany do niej wybierze wszystkie elementy <li>
, które są na pozycjach parzystych.
Jaka jest różnica między selektorami :NTH-OF-TYPE i :NTH-CHILD?
Oba te selektory CSS dopasowują elementy znajdujące się na tym samym poziomie drzewa dokumentu. Jednak :nth-of-type(...)
wymaga dodatkowo, aby znajdowała się tam przynajmniej podana liczba elementów o takiej samej nazwie (mogą być przedzielone również innymi elementami), natomiast :nth-child(...)
wybiera po prostu element o podanej kolejności. Na przykład, jeśli mamy: <p>...</p> <p>...</p> <div>...</div> <p>...</p>
, to :nth-of-type(3)
wybierze ostatni element <p>
(trzeci akapit), a :nth-child(3)
dopasuje element <div>
(trzecie dziecko).
Przeglądarki
Chrome | Firefox | Edge | Opera | Safari | Poziom wsparcia min. 2,5 roku | |
---|---|---|---|---|---|---|
:nth-child | 1 2008-12-11 | 3.5 2009-06-30 | 12 2015-07-29 | 9.5 2008-06-12 | 3.1 2008-03-18 | |
:nth-last-child | 4 2010-01-25 | 3.5 2009-06-30 | 12 2015-07-29 | 9 2006-06-20 | 3.1 2008-03-18 | |
:nth-of-type | 1 2008-12-11 | 3.5 2009-06-30 | 12 2015-07-29 | 9.5 2008-06-12 | 3.1 2008-03-18 | |
:nth-last-of-type | 4 2010-01-25 | 3.5 2009-06-30 | 12 2015-07-29 | 9.5 2008-06-12 | 3.1 2008-03-18 |
Komentarze
- Sławomir Kokłowski
18.05.2020 20:19
Zależy o co pytasz. Ale generalnie na tak postawione pytanie odpowiedź brzmi: tak ;-)
Zobacz więcej - Gosc
18.05.2020 19:29
Ktoś to jeszcze "ulepsza"?
Zobacz więcej - Nitr0Skay
07.01.2015 20:17
kurshtml
Teraz już jest w porządku. Dziękuję za poprawkę :)
Zobacz więcej - Sławomir Kokłowski
06.01.2015 23:41
Dziękuję za informację. Minifikator kodu usunął białe znaki z tego znacznika.
Zobacz więcej - Nitr0Skay
06.01.2015 21:24
Gość
Potwierdzam. U mnie też to występuje. Korzystam z Chrome
http://caniuse.com/#search=%3Aempty
http://i.imgur.com/T3Mv6F2.png
Zobacz więcej - Gość
06.01.2015 21:05
Chciałam zapytać: czy tu (http://www.kurshtml.edu.pl/css/pusty_element,pseudoklasy.html) nie ma błędu? U mnie zarówno pierwszy jak i trzeci akapit mają czerwone tło.
Zobacz więcej - Roberto
31.03.2013 18:27
ujemne marginesy, position:absolute, ogólnie wyjęcie z obiegu albo 'przeciwdziałanie' zmianom.
nazwy muszą być dzieckiem elementu, którego :hover powoduje zmianę - [...] jak najedziesz na 'magia' to strong nadal jest...
Zobacz więcej - GoŚćX
31.03.2013 18:21
Chciałbym wiedzieć czy istnieje taka cecha że pojawiający się element który wcześniej miał ceche i wartość: display:none; nie rozwali żadnych elementów strony, tylko pokaże się nad nimi. I gdy robię menu gdzie po najechaniu na klawisz np: galeria zwiększa on wysokoś i na nim wyskakują nazwy...
Zobacz więcej - Roberto
30.03.2013 20:03
zmiana display dziecka z none na jakiś przy :hover rodzica...
Zobacz więcej - jaaa
30.03.2013 19:12
Jak zrobić żeby po najechaniu myszką na jakiś elemnt (np: klawisz z menu) oprucz zmiany (podświetlenia klawisza) pod nim pokazywał się na przykład jakiś bloczek (zupełnie inny elemnt) jakie selektory użyć???
Zobacz więcej