Vanliga missförstånd angående x-of-type

CSS-kod

När denna artikel skrevs angick den följande pseudo-klasser:

  • nth-of-type
  • nth-last-of-type
  • first-of-type
  • last-of-type
  • only-of-type

Eftersom de alla är ganska lika varandra kommer jag fokusera på nth-of-type och låta er komma på resten själva.

Det verkar finnas viss förvirring angående vad :nth-of-type(x) gör. Vissa verkar tro att den endast väljer element nummer x av alla alement som annars är valda. Alltså, om man har 5 element

  1. A,
  2. B,
  3. C,
  4. D,
  5. och E

som alla är <div>-taggar, och dessa är de enda elementen av den typen, så kommer användandet av väljaren div:nth-of-type(3) nödvändigtvis endast sikta på element C, oavsett dokumentets struktur, på samma sätt som document.querySelectorAll('div')[3] skulle göra det i JavaScript. Detta stämmer inte.

Sanningen är att :nth-of-type(x) endast kommer filtrera elementen till de som är den x:te förekomsten av ett element av dess typ, bland sig självt och dess syskon. Väsentligen beter den sig likadant som nth-child, förutom det att den endast räknar element av samma typ som elementet i fråga när den avgör ett elements index. Den kanske borde kallas “nth-child-of-type” istället?

Ett annat vanligt missförstånd är att ordet “type” i nth-of-type refererar till alla element som är av “typen/typerna” att siktas på av de mönster som företräder pseudo-klassen. T.ex. med en väljare #foobar.active:nth-of-type(3) tros det att pseudo-klassen kommer välja det 3:e elementet med ID:t foobar och klassen active. Detta stämmer inte.

“Type” refererar i det här fallet till typen av element på samma sätt som “type” i termen “type selector” gör det, alltså i taggnamnet. Observera följande kod:

<div id="a">
    <div id="a1" class="foobar"></div>
    <div id="a2" class="foobar"></div>
    <span id="a3" class="foobar"></span>
    <div id="a4" class="foobar"></div>
</div>
<div id="b">
    <h1 id="a1"></h1>
    <div id="b2"></div>
    <div id="b3" class="foobar"></div>
</div>

ID:n överanvänds för enkla referenser.

Antag att detta är den enda koden som innehålls i <body>-taggen. Vi säger att vi siktar på element genom att använda väljaren .foobar:nth-of-type(3). Vissa kanske tror att detta skulle sikta på #b3, eftersom #b3 är det tredje elementet med klassen foobar. Detta stämmer inte.

Sanningen är att endast #a4 kommer att siktas på, eftersom #a4 är det enda elementet med klassen foobar som företräds av två element av samma typ. #a4 är en <div>-tagg, och den företräds av två <div>-taggar — därför är den den tredje <div>-taggen bland sig själv och dess syskon. <span>-taggen spelar ingen roll, eftersom den inte är av samma typ.

En annan sak att notera är att nth-last-of-type helt enkelt är som en bakåtvänd nth-of-type — elementens indexering påbörjas vid det sista elementet, istället för vid det första. För konsekvent namngivelse skulle det möjligtvis föredras att dessa namnges nth-first-of-type och nth-last-of-type istället.