Blog

W dniu dzisiejszym postanowiłem podzielić się z innymi prostym ułatwieniem, które oferuje nam CSS. Mam tu namyśli Selektor :nth-child() umożliwiający szybkie określenie pożądanego elementu.

Teraz trochę teorii, za którą osobiście nie przepadam.

Selektor :nth-child() - to nic innego jak funkcja CSS, która służy do odszukania elementów (według określonego wzoru) będących dziećmi swojego rodzica. Selektor stworzony z myślą o formatowaniu wyglądu tabeli czy list. Oczywiście jego zastosowanie może być dużo większe.  Selektor rozpoczyna liczenie dzieci od pierwszego dziecka do ostatniego dziecka w przeciwieństwie do selektora :nth-last-child().

Osobiście wielokrotnie korzystam z tego selektor'a podczas tworzenia nowego wyglądu strony. Jego łatwa struktura oraz interpretacja, pozwoli każdej osobie zrozumieć jego składnie nawet, jeśli ktoś dopiero zaczyna swoją przygodę z CSS.

Podstawowy wzór selektora :nth-child() wygląda następująco:

:nth-child(wartość) {
	właściwość:wartość;
}

Wartości jakie możemy podać wraz z selektorem :nth-child() to
even	selektor odszuka parzyste dzieci (licząc dzieci od pierwszego do ostatniego)
odd	selektor odszuka nieparzyste dzieci (licząc dzieci od pierwszego do ostatniego)
Liczba (1,2,3,...,n)	odszuka konkretne dziecko rodzica, np. po podaniu liczby 5, selektor wskaże piąte dziecko(jeżeli taki typ dziecka na podanym miejscu występuje)
liczbaN+Liczba (2n+10)	możemy podać własny wzór według jakiego selektor ma odszukiwać kolejne dzieci, pierwsza liczba oznacza - co jaką liczbę selektor ma wskazywać kolejne dzieci, a druga liczba oznacza - od którego dziecka ma zacząć się odszukiwanie Przykład: 3n+5 - selektor ma rozpocząć odszukiwanie dzieci od piątego dziecka (licząc od początku), a następnie ma wskazywać co trzecie dziecko

Dla lepszego zrozumienia podam przykładową regułę CSS oraz ją objaśnię.

img:nth-child(odd) {
	border: 5px solid #000;
}

Objaśnienie
img:nth-child(odd)	Do każdego elementu img, który jest nieparzystym dzieckiem swojego rodzica w danym dokumencie HTML (licząc dzieci od pierwszego do ostatniego) ...
border	dodaj właściwość, która ustawi obramowanie obrazka ...
5px solid #000;	... 5 pikseli linii ciągłej w kolorze czarnym.

Przykłady

Wybirz 5-ty element listy

li:nth-child(5) {
    color: green;   
}

Wybirz wszystkie od 6-go elementu listy

li:nth-child(n+6) {
    color: green;   
}

Wybirz wszystkie do 5-go elementu listy

li:nth-child(-n+5) {
    color: green;   
}

Wybierz co 4-ty element listy, począwszy od pierwszego

li:nth-child(4n+1) {
    color: green;   
}

Wybierz nieparzyste elementy listy, począwszy od pierwszego

li:nth-child(odd) {
    color: green;   
}

Wybierz parzysty elementy listy, począwszy od pierwszego

li:nth-child(even) {
    color: green;   
}

Wybierz pierwszy element listy

li:first-child {
    color: green;   
}

Wybierz ostatni element listy

li:last-child {
    color: green;   
}

Wybierz 2-gi element listy, zaczynając od końca

li:nth-last-child(2) {
    color: green;   
}

Mam nadzieję, że osoby, które wcześniej nie znały tego selektora, po przeczytaniu poradnika poznali jego zasady i pozwoli wam to ułatwić pracę z CSS.