:nth-child() vs :nth-of-type()
nth-child() liczy wszystkie elementy rodzica, niezależnie od znacznika. nth-of-type() liczy tylko rodzeństwo z tym samym znacznikiem co wybrany selektor.
Porównanie w tabeli
#Co liczy
- :nth-child()
- Wszystkie elementy rodzica, niezależnie od znacznika
- :nth-of-type()
- Tylko rodzeństwo z tym samym znacznikiem
Składnia argumentu
- :nth-child()
- liczba,
odd,even,An+B - :nth-of-type()
- Te same wzory: liczba,
odd,even,An+B
Liczenie po klasie (`of selektor`)
- :nth-child()
- Tak, np.
:nth-child(2 of .hot) - :nth-of-type()
- Nie, liczy tylko znaczniki
Wersje bez argumentu
- :nth-child()
:first-child,:last-child- :nth-of-type()
:first-of-type,:last-of-type
Typowa pułapka
- :nth-child()
- Mieszane znaczniki w rodzicu dają zaskakujący wynik
- :nth-of-type()
- Trzeba pamiętać, że liczy tylko dany znacznik, nie klasę
Typowe użycie
- :nth-child()
- Paski w tabelach:
tr:nth-child(even) - :nth-of-type()
- Akapit w artykule z przeplatającymi się obrazkami
Przykład
#p:first-child { background: #7c3aed; color: #fff; }<article class="stage">
<h4 style="margin: 0 0 6px;">Nagłówek</h4>
<p style="margin: 0 0 6px;">Pierwszy akapit</p>
<p style="margin: 0;">Drugi akapit</p>
</article>Nic się nie podświetla: pierwszym dzieckiem artykułu jest h4, a nie akapit.
Definicja i zastosowanie
#Pseudoklasa :nth-child() numeruje wszystkie dzieci rodzica, zaczynając od 1, bez względu na to, jakim znacznikiem są. Przyjmuje konkretną liczbę, słowa odd i even albo wzór An+B, dokładnie tak samo jak jej siostrzana pseudoklasa.
:nth-of-type() działa według tej samej składni argumentu, ale liczy tylko rodzeństwo z tym samym znacznikiem co element po lewej stronie selektora. W rodzicu, w którym akapity przeplatają się z obrazkami, p:nth-of-type(2) wskaże drugi akapit, nawet jeśli przed nim stoją inne elementy.
Klasyczna pułapka to p:first-child, które nie trafi w nic, jeśli przed pierwszym akapitem stoi nagłówek, bo pierwszym dzieckiem rodzica jest właśnie on. Rozwiązuje to p:first-of-type. Z drugiej strony tylko :nth-child() rozumie nowszą składnię of <selektor>, czyli liczenie po klasie, a nie po znaczniku.
Składnia
#:nth-child( <liczba> | odd | even | An+B [of <selektor>]? )
:nth-of-type( <liczba> | odd | even | An+B )Więcej przykładów
#p:first-of-type { background: #7c3aed; color: #fff; }<article class="stage">
<h4 style="margin: 0 0 6px;">Nagłówek</h4>
<p style="margin: 0 0 6px;">Pierwszy akapit</p>
<p style="margin: 0;">Drugi akapit</p>
</article>Teraz podświetla się pierwszy akapit, mimo że w kodzie stoi po nagłówku.
span:nth-of-type(even) { background: #7c3aed; color: #fff; }<div class="stage" style="display: flex; gap: 6px; flex-wrap: wrap;">
<span class="box">1</span><em>a</em><span class="box">2</span><span class="box">3</span><em>b</em><span class="box">4</span>
</div>nth-of-type liczy tylko wśród elementów span (2 i 4), bez oglądania się na em stojące między nimi. nth-child(even) policzyłby zupełnie inne elementy.
Dobre praktyki
#- Gdy w rodzicu mieszają się różne znaczniki,
:nth-of-type()zwykle daje bardziej przewidywalny wynik niż:nth-child(). - Tylko
:nth-child()rozumie składnię "of selektor", np.:nth-child(2 of .hot), czyli liczenie po klasie. - Klasyczna pułapka:
p:first-childnie zadziała, jeśli przed pierwszym akapitem stoi nagłówek. Użyjp:first-of-type.
Powiązane hasła
#- :nth-child()Wybiera elementy według pozycji wśród rodzeństwa: co drugi, co trzeci, pierwsze trzy albo wszystkie od siódmego.
- :nth-of-type()Wybiera elementy według pozycji wśród rodzeństwa z tym samym znacznikiem, na przykład co drugi obrazek albo trzeci akapit.
- :first-childPasuje do elementu, który jest pierwszym dzieckiem swojego rodzica.
- :last-childPasuje do elementu, który jest ostatnim dzieckiem swojego rodzica.
- :not()Wybiera elementy, które nie pasują do podanego selektora ani do żadnego z listy.
Widzisz błąd albo brakuje przykładu? Napisz do nas.