:nth-child i :nth-of-type
Nauczy się Pan/Pani wybierać elementy według ich pozycji w elemencie nadrzędnym, używając formuł nth i selektorów typów.
:nth-child i :nth-of-type to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Czym są pseudoklasy strukturalne?
Pseudoklasy strukturalne wybierają elementy na podstawie ich położenia wewnątrz elementu nadrzędnego. Eliminują potrzebę dodawania klas lub używania JavaScriptu do wybierania konkretnych elementów potomnych.
:first-child i :last-child
Wybierają pierwsze lub ostatnie dziecko elementu nadrzędnego:
<ul><li>First item (no top border)</li><li>Middle item</li><li>Last item (no bottom margin)</li></ul>
Podstawy :nth-child()
:nth-child(n) wybiera elementy na podstawie ich pozycji (numerowanej od 1) wśród rodzeństwa dowolnego typu.
<ul><li>Item one</li><li>Item two</li><li>Item three</li></ul>
:nth-child() ze słowami kluczowymi
Do stylowania naprzemiennych wierszy należy użyć słów kluczowych odd lub even:
<table><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr><tr><td>Row 4</td></tr></table>
:nth-child() z formułami
Należy użyć formuły An+B, gdzie A oznacza krok, a B — przesunięcie. n zaczyna się od 0 i zwiększa się o 1.
3n— co trzeci element (3, 6, 9...)3n+1— pierwszy element z każdej trójki (1, 4, 7...)-n+3— tylko trzy pierwsze elementy
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
:nth-of-type()
:nth-of-type() zlicza tylko elementy rodzeństwa tego samego typu, pomijając pozostałe. Ma to znaczenie, gdy typy elementów są mieszane.
<h2>Heading</h2><p>First paragraph</p><p>Second paragraph (blue)</p><p>Third paragraph</p>
:first-of-type i :last-of-type
Wybierają pierwszy lub ostatni element określonego typu znacznika wśród elementów rodzeństwa:
<p>Lead paragraph (larger)</p><p>Regular paragraph</p>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%231e90ff'/></svg>" alt="one" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%23ff6347'/></svg>" alt="two" />
:nth-child a :nth-of-type
Najważniejsza różnica:
p:nth-child(2)— wybiera drugie dziecko, JEŚLI jest elementem<p>p:nth-of-type(2)— wybiera drugi element<p>, niezależnie od innych elementów
:only-child i :only-of-type
:only-child wybiera element, który jest jedynym dzieckiem swojego elementu nadrzędnego. :only-of-type wybiera element, który jest jedynym elementem swojego typu w elemencie nadrzędnym.
<div><p>I'm the only child in this div.</p></div>
:nth-child z selektorem of S (nowoczesna składnia)
Nowoczesny CSS pozwala filtrować elementy uwzględniane w zliczaniu przez formułę nth za pomocą :nth-child(An+B of selector):
<ul><li class="featured">Featured 1</li><li>Regular</li><li class="featured">Featured 2 (gold)</li><li class="featured">Featured 3</li></ul>
Praktycznie: odstęp siatki w ostatnim wierszu
Usunięcie dolnego marginesu ostatniego widocznego elementu:
<div class="grid"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>
Szybkie sprawdzenie
Który selektor wybiera co trzeci element listy, zaczynając od pierwszego?
Podsumowanie
:nth-child() zlicza całe rodzeństwo według pozycji; :nth-of-type() zlicza tylko elementy rodzeństwa z tym samym znacznikiem. Do tworzenia tabel z naprzemiennymi wierszami należy używać odd/even. Formuła An+B umożliwia tworzenie zaawansowanych wzorców, takich jak „co trzeci element” lub „pierwsze pięć elementów”, bez dodawania klas.
Często zadawane pytania
Czy lekcja „:nth-child i :nth-of-type” jest bezpłatna?
Tak — pełny tekst „:nth-child i :nth-of-type” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „:nth-child i :nth-of-type”?
Nauczy się Pan/Pani wybierać elementy według ich pozycji w elemencie nadrzędnym, używając formuł nth i selektorów typów. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „:nth-child i :nth-of-type”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- :hover :focus :active i :visited
- :nth-child i :nth-of-type
- :not() :is() i :where()
- :checked :disabled i pseudo-klasy stanu formularza