chevron-left chevron-right

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

[CSS] Magia selektora :nth-child - jak tego używać? - Przykład 1
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.

[CSS] Magia selektora :nth-child - jak tego używać? - Przykład 2
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:

[CSS] Magia selektora :nth-child - jak tego używać? - Przykład 3
1
2
3
4
li:nth-child(-n+3) {
    background: #b30;
    padding: 9px;
}

Wybierz co trzeci element z grupy

[CSS] Magia selektora :nth-child - jak tego używać? - Przykład 4
1
2
3
4
li:nth-child(3n+1) {
    background: #b30;
    padding: 9px;
}

Wybierz parzyste elementy

[CSS] Magia selektora :nth-child - jak tego używać? - Przykład 5
1
2
3
4
li:nth-child(even) {
    background: #b30;
    padding: 9px;
}

Wybierz nieparzyste elementy

[CSS] Magia selektora :nth-child - jak tego używać? - Przykład 6
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.

[CSS] Magia selektora :nth-child - jak tego używać? - Przykład 7
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.

[CSS] Magia selektora :nth-child - jak tego używać? - Przykład 8
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.

  • Bardzo dobrze opisane :). przydało mi się i trochę rozjaśniło.

  • Krystian

    Dobry wpis. Co prawda widziałem właśnie ten z css-tricks.com ale dobrze jest, że ktoś to umie wytłumaczyć i po Polsku 🙂

  • Fajnie opisane. Do tej pory nie korzystałem tylko z nth-child i nth-last-child. Zawsze obrabiałem to JS. Mam nadzieję, że CSS3 szybko stanie się standardem 🙂

  • Brakuje obrazków na stronie czy tylko mi się wydaje 😐 ?

  • Piotr Nalepa

    Dzięki za zwrócenie uwagi. Jak będę miał możliwość, to zajmę się to kwestią.