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

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

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

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

Wybierz co trzeci element z grupy

1
2
3
4

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

Wybierz parzyste elementy

1
2
3
4

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

Wybierz nieparzyste elementy

1
2
3
4

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

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

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

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