[CSS] Magia selektora :nth-child – jak tego używać?

Dzisiejszy artykuł będzie dotyczył sposobów wykorzystania pseudoselektorów na stronach WWW. Pseudoselektory o których dzisiaj będzie mowa to:

• :nth-child
• first-child
• last-child
• nth-last-child

Z pomocą selektorów powyżej można dokonywać magii, no i przyda się trochę wiedzy matematycznej do obliczania pozycji 😉

Section 1Wybierz tylko trzeci element z grupy

By wybrać 3-ci element z danej grupy, na przykład listy nieuporządkowanej, możemy wykorzystać następujący kod:

1
2
3
4

li:nth-child(3) {
    background: #b30;
    padding: 9px;
}

Section 2Wybierz wszystkie poza pierwszymi trzema elementami

Jest to przydatne w momencie gdy mamy więcej niż 3 elementy w grupie.

1
2
3
4

li:nth-child(n+4) {
    background: #b30;
    padding: 9px;
}

Jeśli mamy 4 elementy w grupie to bardziej sensowną metodą pozyskania ostatniego elementu będzie wykorzystanie :last-child.

Section 3Wybierz tylko pierwsze 3 elementy

W przeciwieństwie do przykładu powyżej teraz wykorzystamy wartości ujemne:

1
2
3
4

li:nth-child(-n+3) {
    background: #b30;
    padding: 9px;
}

Section 4Wybierz co trzeci element z grupy

1
2
3
4

li:nth-child(3n+1) {
    background: #b30;
    padding: 9px;
}

Section 5Wybierz parzyste elementy

1
2
3
4

li:nth-child(even) {
    background: #b30;
    padding: 9px;
}

Section 6Wybierz nieparzyste elementy

1
2
3
4

li:nth-child(odd) {
    background: #b30;
    padding: 9px;
}

Section 7Wybierz ostatni element

Tak jak wspomniałem wcześniej w tym celu użyjemy pseudoselektora :last-child zamiast :nth-child.

1
2
3
4

li:last-child {
    background: #b30;
    padding: 9px;
}

Section 8Wybierz przedostatni element

Nie każdy o tym wie, ale można też wybrać przedostatni element z grupy wykorzystując :nth-last-child.

1
2
3
4

li:nth-last-child(2) {
    background: #b30;
    padding: 9px;
}

Section 9Pseudoselektory - podsumowanie

Jak widać na powyższych przykładach, pseudoselektory są bardzo użytecznym narzędziem budowania stron WWW. Dzięki nim, możemy tworzyć odmienny wygląd dla listy czy grupy elementów, co jest często przydatne.
Nie można jednak zapomnieć o tym, że część przeglądarek (przeważnie tych starszych i Internet Explorery) może źle interpretować lub w ogóle może nie obsługiwać pseudoselektory. Dlatego też, takim rozwiązaniem pomocniczym będzie wykorzystanie narzędzia JS o nazwie Selectivzr. Dzięki niemu, będziesz mógł/mogła zapomnieć o problemie pseudoselektorów na w przeglądarkach (na szczęście, niewiele osób wyłącza JS w przeglądarkach).
Od siebie dodam, że dobrze jest łączyć Selectivzr z biblioteką Mootools, dzięki czemu uzyskamy wsparcie dla wszelkich możliwych selektorów.

Artykuł powstał w oparciu o ten wpis.