CSS nth-child bez tajemnic - jak czytać An+B i nie popełniać błędów

Ten selektor CSS rozwiązuje bardzo praktyczny problem: pozwala wskazać elementy według ich miejsca wśród rodzeństwa, bez dokładania klas do każdego wiersza, kafelka czy akapitu. Dobrze użyty upraszcza arkusz stylów i utrzymuje rytm układu nawet wtedy, gdy treść się zmienia. Poniżej pokazuję, jak czytać zapis An+B, gdzie najłatwiej o pomyłkę i kiedy lepiej wybrać inny wariant.

Jak działa wybieranie według pozycji wśród rodzeństwa

W praktyce ta reguła wybiera element nie po klasie, lecz po miejscu zajmowanym wśród rodzeństwa. Jeśli w kontenerze masz pięć kart, trzy akapity albo dziesięć wierszy tabeli, przeglądarka liczy ich kolejność i dopasowuje styl tylko do tych pozycji, które pasują do wzoru. Ja lubię to rozwiązanie, bo pozwala budować rytm układu bez dokładania technicznych klas do każdego powtarzalnego elementu.

Najważniejszy warunek jest prosty: liczą się tylko elementy mające tego samego rodzica. Gdy do środka dołożysz dodatkowy element opakowujący albo wstawisz między elementy inny tag, numeracja przesuwa się natychmiast. To właśnie dlatego ta reguła jest świetna do list, galerii i tabel, ale wymaga odrobinę dyscypliny w HTML.

MDN zwraca uwagę, że indeksy zaczynają się od 1, więc pierwszy element nie ma pozycji 0. To drobiazg, który oszczędza sporo pomyłek przy pierwszych próbach i dobrze przygotowuje do czytania zapisu An+B.

Żeby używać tego świadomie, trzeba jeszcze umieć rozłożyć wzór na części i zrozumieć, co naprawdę oznacza krok oraz punkt startu.

Jak czytać zapis An+B bez zgadywania

Zapis An+B wygląda matematycznie, ale w CSS da się go czytać bardzo dosłownie: `A` mówi, co ile elementów ma łapać wzór, a `B` określa punkt startu. Gdy raz rozbijesz go na te dwie części, większość przykładów staje się oczywista.

Najprościej myśleć o tym jak o prostym liczniku: start plus krok. Gdy wiesz, od którego miejsca zaczynasz i co ile powtarzasz wybór, reszta to już tylko zapis. Tę logikę najlepiej widać na konkretnych przykładach, bo dopiero wtedy selektor przestaje wyglądać jak wzór z notatnika i zaczyna działać jak narzędzie do porządkowania interfejsu.

Przykłady, które najłatwiej pokazują działanie selektora

Najczytelniej widać go na powtarzalnych listach. W poniższym przykładzie parzyste i nieparzyste elementy dostają różne tło, a sama reguła pozostaje krótka i odporna na rozrost HTML.

li:nth-child(odd) {
  background: #f6f7f9;
}

li:nth-child(even) {
  background: #ffffff;
}

Ten sam wzór dobrze działa też na kartach w siatce, akapitach w artykule czy wierszach tabel. Gdy chcę podkreślić kilka pierwszych pozycji, zwykle sięgam po kombinację kroku i ujemnego startu, bo pozwala objąć pierwszy, drugi i trzeci element bez ręcznego dopisywania klas. W praktyce to jeden z tych zapisów, które szybko zaczynają oszczędzać czas przy bardziej rozbudowanych widokach.

Warto też pamiętać, że taki sposób stylowania najlepiej sprawdza się tam, gdzie kolejność elementów ma znaczenie sama w sobie. Jeśli układ ma dużo wyjątków, bardziej opłaca się wrócić do prostszej struktury niż walczyć z coraz dłuższym selektorem.

Właśnie przy wyjątkach najłatwiej o błąd, dlatego następna rzecz, którą zawsze sprawdzam, to wpływ DOM na numerację.

Najczęstsze błędy, które przesuwają numerację

Najczęstszy problem nie leży w samej składni, tylko w strukturze DOM, czyli drzewie dokumentu. Gdy pod rodzicem pojawia się dodatkowy nagłówek, separator albo ukryty element, indeksy zmieniają się i nagle styl trafia w inny wiersz niż zakładałeś.

• Mylenie kolejności wizualnej z DOM - CSS liczy elementy w strukturze, a nie to, jak układ wygląda po stylowaniu.
• Zakładanie, że ukryty element „znika” z licznika - jeśli nadal jest w drzewie dokumentu, może wpływać na pozycje sąsiadów.
• Pomijanie dodatkowego opakowania - jeden nowy wrapper potrafi przesunąć całą serię selektorów.
• Stylowanie tabel bez sprawdzenia struktury - w praktyce często trzeba uwzględnić `tbody`, bo przeglądarka może go wstawić automatycznie.

Ja zawsze sprawdzam strukturę w narzędziach deweloperskich, zanim uznam regułę za błędną. To zwykle oszczędza czas, bo problemem bywa nie selektor, tylko nieoczekiwany element pośredni. Skoro już wiadomo, gdzie najłatwiej o wpadkę, warto porównać tę technikę z jej najbliższymi odpowiednikami.

Czym różni się od podobnych selektorów

Najwięcej pomyłek bierze się z mylenia tej reguły z innymi selektorami pozycyjnymi. Różnice są niewielkie w zapisie, ale duże w działaniu, dlatego dobrze mieć je obok siebie.

Najpraktyczniejsza różnica jest taka: selektor liczony po typie bywa bezpieczniejszy, gdy w jednym kontenerze mieszają się nagłówki, akapity, obrazy i linki, a reguła po pozycji ogólnej sprawdza się wtedy, gdy naprawdę interesuje cię cały zestaw rodzeństwa. Jeśli wiem, że struktura będzie się zmieniała, zwykle wybieram prostsze rozwiązanie, bo łatwiej je utrzymać. Gdy jednak potrzebuję filtrować tylko część rodzeństwa, przydaje się nowsza składnia z argumentem `of`.

Kiedy wariant z argumentem of daje lepszy efekt

To jest ten moment, w którym CSS przestaje liczyć wszystko po kolei, a zaczyna liczyć tylko elementy spełniające dodatkowy warunek. W specyfikacji Selectors Level 4 ten mechanizm został opisany właśnie po to, żeby wzory były stabilniejsze przy filtrowaniu, ukrywaniu lub selekcji części rodzeństwa.

tr:nth-last-child(even of :not([hidden])) {
  background: #eef2f6;
}

W praktyce taki zapis ma sens wtedy, gdy część wierszy lub kart bywa ukryta, a ty chcesz zachować czytelny rytm kolorów. Bez tego pas kolorystyczny potrafi się rozjechać, bo liczenie obejmuje także elementy, które użytkownik finalnie nie widzi. To drobna różnica w składni, ale w interfejsie robi zauważalną różnicę.

Ja traktuję ten wariant jako narzędzie do sytuacji, w których zwykłe liczenie przestaje być odporne na zmiany treści. Jeśli elementy są dynamiczne, filtr z `of` pomaga utrzymać porządek bez dokładania skryptu tylko po to, by naprawić estetykę układu.

Jak używać go oszczędnie, żeby CSS pozostał czytelny

Najlepiej traktuję ten mechanizm jako narzędzie do rytmu, a nie do nadrabiania braków w HTML. Jeżeli reguła zaczyna być pełna wyjątków, zwykle lepiej wrócić do prostszej struktury albo dodać klasę, zamiast dokładać kolejne warunki.

• Używaj prostych wzorów, gdy tylko się da - `odd`, `even` i krótkie zakresy są czytelniejsze niż rozbudowane wyrażenia.
• Sprawdzaj wpływ dodatkowych elementów - nagłówki, separatory i wrappery potrafią przesunąć numerację.
• Porównuj z :nth-of-type() - gdy rodzeństwo ma różne tagi, to często lepszy wybór.
• Nie bój się klas, jeśli reguła opisuje stan, a nie strukturę - CSS strukturalny ma sens wtedy, gdy naprawdę wynika z układu.

Jeśli trzymasz się tej zasady, selektor pozostaje wygodny także w większych projektach: stylujesz układ, a nie walczysz z nim. I właśnie w tym tkwi jego największa wartość - daje porządek tam, gdzie powtarzalność elementów jest częścią projektu, a nie przypadkiem.