Although I have been using :nth-of-type selectors quite heavily in the past, I came across a phenomenon today that I hadn’t encountered before.

I thought if I’d use a selector like this

.my-class:nth-of-type(2n)

that this would target every second element with a class of .my-class. But that’s not how this selector works. It also takes into account, which element you are using!

So this

<div class="my-class">…</div> <!-- not targeted -->
<div class="my-class">…</div> <!-- targeted -->
<div class="my-class">…</div> <!-- not targeted -->
<div class="my-class">…</div> <!-- targeted -->

is not the same as this

<div class="my-class">…</div> <!-- not targeted -->
<article class="my-class">…</div> <!-- not targeted -->
<div class="my-class">…</div> <!-- not targeted -->
<article class="my-class">…</div> <!-- not targeted -->

Now that I think about it, it makes a lot of sense of course. The selector to make the second example work would be

.my-class:nth-child(2n)

And that’s what I learnt today.