I need an explanation on how nth-of-type works

Question

I have this code and I can't figure out why the nth-of-type selector needs to be 2, not 1, for the first sibling of this type.

Here's a jsfiddle code: https://jsfiddle.net/xj5hvn16/

Can someone, please, explain this to me?

.flowbox .utm_registrars_code:nth-of-type(2) {
  background-color: red;
}

<div class="flowbox freebox">
  <div class="pholdcard18"></div>
  <div class="flowcard14 utm_registrars_code">
    <div class="content">
      Content 1
    </div>
  </div>
  <div class="flowcard14 utm_registrars_code">
    <div class="content">
      Content 2
    </div>
  </div>
  <div class="flowcard14 utm_registrars_code">
    <div class="content">
      Content 3
    </div>
  </div>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type — mplungjan, Feb 04 '17 at 09:29

score 1 · Answer 1 · answered Feb 04 '17 at 09:29

1

nth-of-type does not mean nth-of-class!

The first element of type div is

<div class="pholdcard18"></div>

Hence your Content 1 element is the second and highlighted.

answered Feb 04 '17 at 09:29

Sirko

72,589
19
149
183

Asons · Accepted Answer · 2017-02-04T09:35:15.710

That is because nth-of-type starts with the first element of a certain type, in your case a div, and not the first element with the selected class

The :nth-of-type() pseudo-class represents an element that has an+b siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n, and has a parent element.

More info:

I need an explanation on how nth-of-type works

2 Answers2