Blog

[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

Wybirz 5-ty element listy - Oven Servers

li:nth-child(5) {
    color: green;   
}
Wybirz wszystkie od 6-go elementu listy

Wybirz wszystkie od 6-go elementu listy - Oven Servers

li:nth-child(n+6) {
    color: green;   
}
Wybirz wszystkie do 5-go elementu listy

Wybirz wszystkie do 5-go elementu listy - Oven Servers

li:nth-child(-n+5) {
    color: green;   
}
Wybierz co 4-ty element listy, począwszy od pierwszego

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

li:nth-child(4n+1) {
    color: green;   
}
Wybierz nieparzyste elementy listy, począwszy od pierwszego

Wybierz nieparzyste elementy listy, począwszy od pierwszego - Oven Servers

li:nth-child(odd) {
    color: green;   
}
Wybierz parzysty elementy listy, począwszy od pierwszego

Wybierz parzysty elementy listy, począwszy od pierwszego - Oven Servers

li:nth-child(even) {
    color: green;   
}
Wybierz pierwszy element listy

Wybierz pierwszy element listy - Oven Servers

li:first-child {
    color: green;   
}
Wybierz ostatni element listy

Wybierz ostatni element listy - Oven Servers

li:last-child {
    color: green;   
}
Wybierz 2-gi element listy, zaczynając od końca

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

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.

Podziel się tym postem:

Podobne:

Strona korzysta z cookies

Korzystanie z serwisów, których administratorem jest firma Oven Servers(zwana dalej „Ovens”) jest równoznaczne z akceptacją przedstawionej poniżej Polityki prywatności.
Strona korzysta z plików cookies w celu realizacji swoich usług. Użytkowanie Witryny oznacza zgodę na wykorzystywanie plików cookie. Pamiętaj jednak że sam możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.
Jeśli chcesz dowiedzieć się więcej, wejdź tutaj.