nth-of-type not working as expected

Question

I've got some simple markup

<div class='1'>
    <div class='11'></div>
    <div class='12'>
        <div class='121'></div>
    </div>
</div>

And I'm using the following CSS to try and target the .11 and .12

div div:nth-of-type(1) { // some rules for the first div }
div div:nth-of-type(2) { // some rules for the second div }

However, it seems that div .121 is being targeted by the first rule. Is there a reason for this?

How would i target .11 in the first rule and .12 in the second only?

score 3 · Accepted Answer · edited May 23 '17 at 12:15

3

It's because div.121 is the first div-type child of div.12.

To exclude it, qualify your div.1's class and add the child combinator >, which will only match children of div.1 rather than any element inside it (this answer illustrates another example):

div.1 > div:nth-of-type(1)
div.1 > div:nth-of-type(2)

edited May 23 '17 at 12:15

Community

1
1

answered Aug 23 '11 at 14:15

BoltClock

700,868
160
1,392
1,356

Worked a treat, care to explain what the `>` is for the people who stumble across this in a couple of months. – dotty Aug 23 '11 at 14:18
1

@dotty: I added a link that explains it. – BoltClock Aug 23 '11 at 14:19

score 1 · Answer 2 · answered Aug 23 '11 at 14:16

1

Because div.121 is also the first div that is a child of a div, and is therefore matched by the same selector.

answered Aug 23 '11 at 14:16

David Thomas

249,100
51
377
410

nth-of-type not working as expected

2 Answers2