Wyjaśnienie selektora :nth-child() – CSS

Czas czytania: 2 minut

Pseudoklasa CSS :nth-child() to selektor oddziałujący na elementy, które spełniają określone warunki. Przykładowo są 3 / 2 elementem potomnym w jakiś kontenerze lub na jakieś liście.

:nth-child()

Brzmi to może na początek nieco enigmatycznie i być może sam trochę inaczej byś to napisał. W praktyce chodzi jednak o to by manipulować konkretnymi elementami potomnymi (jednym wybranym lub grupom spełniającą określony warunek), poprzez nadanie im unikalnych cech. Pewnie teraz zastawiasz się co z czym takim zrobić. Odpowiedz jest bardzo prosta! Selektor ten jest wykorzystywany np. 

• do kolorowania tabel (zamiast ręcznie kolorować każdy wiersz),
• zmiany wyglądu elementu na liści (np. jedna pozycja / kilka pozycji może mieć inny kolor)

Oczywiście dzięki :nth-child() zmiany te wykonujemy z poziomu CSS bez modyfikacji w kodzie HTML czy PHP.

Jak deklarujemy :nth-child()

:nth-child(numer) {
  właściwości CSS;
}

Przykład:

W przykładzie z pomocą :nth-child zmieniliśmy:

• kolor drugiego punktu na #3d3d (limonkowy),
• co drugi element ma dodane tło,
• trzy pierwsze elementy listy mają dodane obramowanie,
• dodaliśmy też tło w drugim akapicie tekstu,
• pozostałe elementy listy nie uległy zmianie.

Zasady działania – czyli co możemy zrobić przykłady

Wybrany element

Jak widać w przykładzie powyżej do zmiany właściwości CSS (konkretnie koloru) 2 elementu listu użyłam:

li:nth-child(2){
color: #3d3d;
}

Co drugi element

W celu zaznaczenia co drugiego elementu użyjemy analogicznego ustawienia 2n zaczynając od 2 elementu

li:nth-child(2n){
background: lightyellow;
}

Co trzeci element

Analogicznie będziemy się zachowywać jeśli będziemy chcieli zaznaczyć co 3 element

li:nth-child(3n){
background: lightyellow;
}

Inny zapis to :nth-child(3n+0)

Parzysty nieparzysty wiersz / element – odd, even

Poniższy kod spowoduje pokolorowanie listy na 2 kolory na przemiennie.

li:nth-child(odd){
background: lightyellow;
}
li:nth-child(even){
background: lightgreen;
}

Przykład:

• Nieparzysty element
• Parzysty element
• Nieparzysty element
• Parzysty element
• Nieparzysty element
• Parzysty element

Z przesunięciem

Teraz zaznaczymy co 3 element zaczynając od 2.

li:nth-child(3n - 1){
background: lightyellow;
}

Zaznaczenie kolejnych po sobie elementów

Teraz zaznaczymy 3 elementy obok siebie.

li:nth-child(-n + 3) {
  border: 2px solid orange;
  margin-bottom: 1px;}

Podobne działanie do :nth-child() ma :nth-of-type(). Element ten oddziałowej na elementy tego samego typu a nie na potomne. W praktyce jednak działają one bardzo podobnie.