: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.
Przykład
#.chat p:nth-of-type(odd) {
justify-self: start;
background: #27272a;
}
.chat p:nth-of-type(even) {
justify-self: end;
background: #7c3aed;
}<style>
.chat p { margin: 0; padding: 6px 12px; border-radius: 12px; max-width: 75%; }
.chat time { justify-self: center; color: #71717a; font-size: 12px; }
</style>
<div class="chat stage" style="display: grid; gap: 6px;">
<time>10:02</time>
<p>Cześć! Jak idzie nauka CSS?</p>
<p>Dobrze, właśnie ćwiczę selektory.</p>
<time>10:05</time>
<p>Spróbuj :nth-of-type(), liczy tylko akapity.</p>
<p>Działa! Godziny nie psują kolejności.</p>
</div>Godziny w znacznikach time stoją między wiadomościami, ale nie zaburzają naprzemiennego układu, bo liczone są tylko akapity.
Definicja i zastosowanie
#Pseudoklasa :nth-of-type() działa jak :nth-child(), ale liczy tylko rodzeństwo z tym samym znacznikiem. W artykule, w którym akapity przeplatają się z obrazkami, p:nth-of-type(2) wskaże drugi akapit, nawet jeśli przed nim stoją trzy obrazki.
Przyjmuje te same argumenty: liczbę, odd, even i wzór An+B. Wersjami bez argumentu są :first-of-type i :last-of-type, a do liczenia od końca służy :nth-last-of-type().
Ważne: „typ” oznacza nazwę znacznika, a nie klasę. Selektor .card:nth-of-type(2) nie wybierze drugiej karty. Wybierze element z klasą card, który jest drugim elementem swojego znacznika (np. drugim div) w rodzicu. Do liczenia po klasie służy :nth-child(2 of .card).
Składnia
#:nth-of-type( <liczba> | odd | even | An+B )Argumenty
#span 2
Drugispan, choć w rodzicu jest trzecim dzieckiem. Elementyemnie są liczone.em 1, em 3
Nieparzyste elementyem: pierwszy i trzeci. Każdy znacznik ma własne liczenie.span 2, span 4
Parzyste elementyspan, bez oglądania się naemstojące między nimi.span 3, span 4
Od trzeciego elementuspando ostatniego.nic
Dla porównaniaspan:nth-child(2)nie wybiera nic, bo drugim dzieckiem rodzica jestem.
Argumenty w praktyce
#2
span, choć w rodzicu jest trzecim dzieckiem. Elementy em nie są liczone.span:nth-of-type(2) { background: #7c3aed; color: #fff; }odd
em: pierwszy i trzeci. Każdy znacznik ma własne liczenie.em:nth-of-type(odd) { background: #7c3aed; color: #fff; }even
span, bez oglądania się na em stojące między nimi.span:nth-of-type(even) { background: #7c3aed; color: #fff; }n+3
span do ostatniego.span:nth-of-type(n+3) { background: #7c3aed; color: #fff; }:nth-child(2)
span:nth-child(2) nie wybiera nic, bo drugim dzieckiem rodzica jest em.span:nth-child(2) { background: #7c3aed; color: #fff; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Używaj
:nth-of-type(), gdy w rodzicu mieszają się różne znaczniki, na przykład akapity, obrazki i nagłówki. - Nie łącz go z klasą w nadziei, że policzy klasy. Liczy tylko znaczniki, więc do klas użyj
:nth-child(… of .klasa).
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.
- :first-childPasuje do elementu, który jest pierwszym dzieckiem swojego rodzica.
- :last-childPasuje do elementu, który jest ostatnim dzieckiem swojego rodzica.
- Selektor typuWybiera wszystkie elementy o podanej nazwie znacznika, na przykład każdy akapit p albo każdy punkt listy li.
- :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.