1

nth-of-type

I want to be able to get the divs by calling them "first, second, third" via nth-of-type now the problem is that this works:

.box:nth-of-type(1)
.box:nth-of-type(3)
.box:nth-of-type(5)

But I don't understand why I can't call them like that:

.box:nth-of-type(1)
.box:nth-of-type(2)
.box:nth-of-type(3)

It's going like this:

<div class="box"></div>
<div class="divider"></div>
<div class="box"></div>
<div class="divider"></div>
<div class="box"></div>

The problem is get fixed when I removing the two dividers which go between them (There are 2 divs called "divider") so I can call them like 1, 2, 3 but why should I need to call them 1, 3, 5 with the dividers? Also when I change the divs to whatever else like p or h1, etc... its okay and I can call them 1, 2, 3

Thank you for your help!

Programmer
  • 15
  • 4
  • 1
    You'll want [`:nth-match()`](http://dev.w3.org/csswg/selectors4/#the-nth-match-pseudo) (when it's implemented), not `:nth-of-type()`. – David Thomas Dec 25 '13 at 21:25

3 Answers3

3

:nth-of-type is relative to siblings elements with the same tag name. It has no notion of classes.

So the .box:nth-of-type(X) selector is only satisfied when:

  • The element has the box class and
  • Its position relative to its siblings which have the same tag name satisfy the nth-of-type rule.

Solution: switch either your box or divider elements to another tag and it will work as you expected.

Demo

<div class="box"></div>
<p class="divider"></p>
<div class="box"></div>
<p class="divider"></p>
<div class="box"></div>


.divider { margin:0; }
.box:nth-of-type(1) {
  /* custom styling for the .box which is
   * the first element among its siblings which have the same tag name (div)
   */
}
.box:nth-of-type(2) { /* same now for the 2nd */ }
.box:nth-of-type(3) {}

You might as well want to change the selector to div.box:nth-of-type(X) just to make it more clear that the nth-of-type relation is with div elements.

Note: of course, adding another div before the .boxes will break these nth-of-type rules. So you have to be careful when using this selector, as changing the DOM structure may affect your styling.

A sturdy alternative which is commonly used (for those paranoid about future changes to the DOM structure, like me) is to apply a modifier class (following the BEM methodology):

<div class="box box--1"></div>


.box { /*base style for all boxes here*/ }
.box--1 { /* custom styles for the box--1 */ }
Fabrício Matté
  • 69,329
  • 26
  • 129
  • 166
1

nth-of-type works with types not classes. So when you use it with a class it will find the type of the class and use it to find the element.

Like in your case it will evaluate the type of .box to div and then find 1, 2 and 3 or 1, 3 and 5 if you use divider.

AbhinavRanjan
  • 1,638
  • 17
  • 21
0

Nth-of-type only selects based on element type. You cant select classes, so at it is only looking at divs.

From quirksmode:

:nth-of-type() works the same, except that it only considers element of the given type ( in the example).

http://quirksmode.org/css/selectors/nthchild.html

Since you already gave the ones you want to select a class, why not just use .box as your selector with no pseudo class?

JAL
  • 21,295
  • 1
  • 48
  • 66
  • Thank you, I did understand why it wasn't good. About the question, I already use the .box selector for global style for all the 3 divs but because each box will have different style in additionally, I need to seleect them individually. – Programmer Dec 25 '13 at 21:57