[CSS] Selektor :nth-child()
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.