[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 😉

Sekcja 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;
}

Sekcja 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.

Sekcja 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;
}

Sekcja 4Wybierz co trzeci element z grupy

1
2
3
4

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

Sekcja 5Wybierz parzyste elementy

1
2
3
4

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

Sekcja 6Wybierz nieparzyste elementy

1
2
3
4

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

Sekcja 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;
}

Sekcja 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;
}

Sekcja 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.