Użycie :nth-child w css

W tym wpisie pokażę na przykładach użycie pseudoselektora :nth-child w css. Selektor :nth-child(n) dopasowuje każdy element, który jest n-tym dzieckiem, niezależnie od typu, jego rodzica (n może być liczbą, słowem kluczowym albo formułą).

Selektor :nth-of-type() używamy, gdy chcemy wybrać element, który jest n-tym dzieckiem danego typu rodzica. Najlepiej zrozumieć wszystko na przykładach. Poniższy kod wybiera tylko 4 element.

li:nth-child(4) {
    color: blue;   
}

W celu wybrania pierwszego elementu można użyć :first-child, a w celu ostatniego :last-child. Poniżej mamy przykład ze słowami kluczowymi odd i even. Oznacza to, że wybieramy nieparzyste lub parzyste elementy odpowiednio.

span:nth-child(odd) {
	color: red;
}

span:nth-child(even) {
	color: blue;
}

Kod poniżej oznacza, że wybieramy elementy większe bądź równe 6 czyli w skrócie od szóstego w górę.

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

Poniższy kod wybiera tylko pierwsze cztery elementy.

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

Poniżej mamy kod, który oznacza - wybierz co czwarty, zaczynając od pierwszego czyli 1, 5, 9 itd.

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

Dzięki :nth-last-child można wybierać elementy od końca. Na przykład poniżej wybieramy drugi element od końca.

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