:nth-child()
- Data publikacji
- Ostatnio edytowano
Zobacz również: w3.org - the :nth-child() pseudo-class (LV3)
Przeznaczenie selektora :nth-child()
:nth-child(...) { ... }
Selektor :nth-child()
odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :nth-child()
.
Cechy elementu HTML spełniają zasadę pseudoklasy :nth-child()
, gdy w danym momencie dany element HTML jest elementem dzieckiem znajdującym się na określonej przez nas pozycji (w zawartości swojego elementu rodzica).
Selektor :nth-child()
odszukuje elementy HTML w kodzie dokumentu HTML na podstawie parametru child, którego wartość musimy określić. Domyślnie odszukiwanie kolejnych elementów HTML odbywa się w orientacji od góry do dołu, w kodzie dokumentu HTML.
Parametry selektora :nth-child()
- Przykładowe zapisy
-
:nth-child(even)
:nth-child(odd)
:nth-child(3)
:nth-child(n)
:nth-child(3n)
:nth-child(4n+3)
:nth-child(-2n+3)
:nth-child(2n-3)
- child
-
Parametr
child
jest wymaganym parametrem selektora:nth-child()
. Parametrchild
określa w jaki sposób selektor:nth-child()
powinien odszukiwać kolejne interesujące nas elementy dzieci.Dostępne wartości parametru
child
- even
-
Wartość
even
parametruchild
każe selektorowi:nth-child()
odszukać elementy dzieci znajdujące się na parzystych pozycjach. - odd
-
Wartość
odd
parametruchild
każe selektorowi:nth-child()
odszukać elementy dzieci znajdujące się na nieparzystych pozycjach. - liczba całkowita
-
Wartość parametru
child
w postaci dowolnej dodatniej liczby całkowitej każe selektorowi:nth-child()
odszukać element dziecko znajdujący się na konkretnej pozycji. - wzór: JUMPnSTART
-
Według z góry zdefiniowanego wzoru możemy określić, w jaki sposób selektor
:nth-child()
powinien odszukiwać kolejne elementy dzieci.Wyjaśnienie wzoru
- JUMP
-
Składnik
JUMP
nie jest wymaganym składnikiem wzoruJUMPnSTART
. SkładnikJUMP
określa wartość przeskoku podczas odszukiwania kolejnych elementów dzieci. - n
-
Składnik
n
jest wymaganym składnikiem wzoruJUMPnSTART
. Składnikn
oddziela składnik JUMP od składnika START, dzięki czemu przeglądarka internetowa może rozróżnić wspomniane składniki JUMP oraz START. - START
-
Składnik
START
nie jest wymaganym składnikiem wzoruJUMPnSTART
. SkładnikSTART
określa, od której pozycji (licząc od góry do dołu) powinno rozpocząć się odszukiwanie kolejnych elementów dzieci. Pierwszy element dziecko znajduje się na pozycji+1
, natomiast następny w kolejności element dziecko (czyli drugi) znajduje się na pozycji+2
itd.
Informacje techniczne o selektorze :nth-child()
- ograniczenie - elementy HTML
-
brak
- ograniczenie - właściwości CSS
-
brak
Przykładowa reguła CSS, selektor :nth-child()
p:nth-child(even) {
color:red;
}
Wyjaśnienie przykładowej reguły CSS
p:nth-child(even) { color:red; }
p:nth-child(even)
-
do każdego elementu
p
, który jest parzystym elementem dzieckiem swojego elementu rodzica (licząc od góry do dołu) color
-
dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML
red
-
na barwę czerwoną
Kod źródłowy przykładowego dokumentu HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
p:nth-child(even) {
color:red;
}
</style>
</head>
<body>
<div>
<p>"p" dziecko numer 1 elementu "div"</p>
<p>"p" dziecko numer 2 elementu "div"</p>
<p>"p" dziecko numer 3 elementu "div"</p>
<div>"div" dziecko numer 4 elementu "div"</div>
<p>"p" dziecko numer 5 elementu "div"</p>
<p>"p" dziecko numer 6 elementu "div"</p>
<div>"div" dziecko numer 7 elementu "div"</div>
<p>"p" dziecko numer 8 elementu "div"</p>
<p>"p" dziecko numer 9 elementu "div"</p>
<div>"div" dziecko numer 10 elementu "div"</div>
<p>"p" dziecko numer 11 elementu "div"</p>
<p>"p" dziecko numer 12 elementu "div"</p>
</div>
</body>
</html>
Rezultat
"p" dziecko numer 1 elementu "div"
"p" dziecko numer 2 elementu "div"
"p" dziecko numer 3 elementu "div"
"p" dziecko numer 5 elementu "div"
"p" dziecko numer 6 elementu "div"
"p" dziecko numer 8 elementu "div"
"p" dziecko numer 9 elementu "div"
"p" dziecko numer 11 elementu "div"
"p" dziecko numer 12 elementu "div"
Tylko elementy "p", które są parzystymi elementami dziećmi swojego elementu rodzica (licząc od góry do dołu) posiadają czerwony kolor tekstu.
Interpretacja selektora :nth-child()
-
tak
-
tak
-
tak
-
tak
-
tak, lecz od wersji 9
-
tak
Zobacz więcej informacji o interpretacji selektora :nth-child().