nth-child doesn't respond to class selector

Question

Unless it's not supposed to but I can't seem to get nth-child to acknowledge the class selector.

I have say 4 divs inside another div, all of various classes and ids. I need to select the first instance of a div with said class. For example:

#content .foo:nth-child(1) { margin-top: 0; }

And obviously again with first-child to get the same affect, but it doesn't affect any of the divs.

Now if I want to force it to work with that div I can do this:

#content .foo:nth-child(3) { margin-top: 0; }

It just so happens that it is the 3rd div in #content, which is pointless because I need to get the 1st instance of anything with that class.

<div id="content">  
  <div id="action-bar"> </div>
  <div id="message"> </div>
  <div class="table"> </div>
  <div class="clear"> </div>
</div>

Here's a sample of the HTML, I've tried nth-of-type as well like this:

#content .table:nth-of-type(1) { margin: 0 }

Again it only responds when I say nth-of-type(3).

EDIT:

I've set up a working example of the problem I'm having here: http://jsfiddle.net/aHwS8/

Maybe you should show us the corresponding parts of your actual HTML document. — Gumbo, Jul 08 '10 at 12:56
But (at least in this example) you have just one element with the class *table*. — Gumbo, Jul 08 '10 at 16:12
@gumbo yes, but 'n' only responds to the number it is the in the container div, not what number it is in the list of .table. I think my understanding of these pseudo-selectors is a little off. @Jake described what I'm trying to do perfectly "o what you want is the first div with class .foo regardless of which child it is. But what this selector does is the first div if it also has class .foo" Gonna have to hit google again. Thanks for your help! — stuartc, Jul 09 '10 at 05:46
Yes, both `:nth-of-type()` and `:nth-child()` do only take the element type or only being an element at all into account when counting. — Gumbo, Jul 09 '10 at 06:42
I discover that if it's a div it's not the same result if it's a span. Go here and change span for div and it will give you different result, It is just in Google Chrome? didn't test it."nth-of-type" http://jsfiddle.net/onigetoc/b3q1mgkh/ — Gino, Jan 08 '17 at 20:26

Gumbo · Accepted Answer · 2010-07-08T12:18:30.837

50

Try the :nth-of-type() pseudo-selector instead:

#content .foo:nth-of-type(1) { margin-top: 0; }

Note that :nth-of-type() counts the elements with the same name. So .foo:nth-of-type(1) will not select the first element with the class foo but any first element that is the first in the list of elements grouped by the same name. If you have some document like this:

<div>
    <i class="foo">1</i><i>x</i><i class="foo">2</i>
    <b class="foo">3</b><b>x</b><b class="foo">4</b>
</div>

.foo:nth-of-type(1) will select the elements <i class="foo">1</i> and <b class="foo">3</b> as both are the first of its own type.

edited Jul 08 '10 at 12:18

answered Jul 08 '10 at 12:07

Gumbo

643,351
109
780
844

Thanks! I tried got the same response, it responded to: #content .foo:nth-of-type(3) { margin-top: 0; } – stuartc Jul 08 '10 at 12:31
It's kind of similar, it's like it's ignoring the .foo class and just selecting the divs – stuartc Jul 08 '10 at 12:41
@stuartc: It does not ignore the class. `.foo:nth-of-type(3)` does only apply to those elements that have the class “foo” *and* are the third of its type (there are only 2 other siblings with the same element name before this element). – Gumbo Jul 08 '10 at 12:55
7

@Gumbo - In a sense, it does ignore the class. It seems to look at the element of that class, and then looks at all of other of that type _regardless of their class_. So it does use the class initially to find the element, but from there it doesn't seem to matter if the elements of that type have the class or not. – norsewulf May 10 '13 at 21:05
3

It's true, just look at this example: http://jsfiddle.net/DK3zc/ It's ignoring the selector by attribute. – Pedro Moreira Mar 31 '14 at 13:58
@Gumbo...probably not the right place to ask,but I do have a question here...I'm trying to work an example of nth-of-type similar to the one you have given here ..http://codepen.io/sahithiK/pen/EgAVzG..but looks like nth-of-type is considering both p and div as the same,can you help on this ,if i replace div with span ,it is workign as expected..I am asking here,as i have a ban on my questions..please help – Geeky Oct 23 '16 at 07:38

score 11 · Answer 2 · answered May 12 '14 at 11:19

This is an old post but I ended up here seeking for an answer for similar problem. Perhaps this will help someone.

I had the following structure, wanting to select the n-th "foo"-div:

<body>
  <div class='container'>
    <div class='foo'></div>
  </div>
  <div class='container'>
     <div class='foo'></div>
  </div>
  <div class='container'>
     <div class='foo'></div>
  </div>
  <div class='container'>
     <div class='foo'></div>
  </div>
</body>

The trick was "go back" and select the parent element with repeated siblings, in this case .container and then select its child(ren):

.container:nth-of-type(3) .foo {
    styles here
}

score 1 · Answer 3 · answered Jul 08 '10 at 12:13

1

I think you're using the wrong selector, try:

#content .foo:first-of-type { margin-top: 0; }

answered Jul 08 '10 at 12:13

Jake

1,026
6
10

Thanks! I tried got the same response, it responded to: #content .foo:nth-of-type(3) { margin-top: 0; } – stuartc Jul 08 '10 at 12:31
Hmm, I see - so what you want is the first `div` with class `.foo` regardless of which child it is. But what this selector does is the first `div` if it also has class `.foo`? From a quick google and look at the CSS3 Pseudo-Selectors I'm not sure this is possible. Sorry I couldn't be more help! – Jake Jul 08 '10 at 14:36
Thanks for your help, despite not fixing my issue, I've learnt a lot about pseudo-selectors! :) thanks again! – stuartc Jul 09 '10 at 05:47

nth-child doesn't respond to class selector

EDIT:

3 Answers3

Linked

Related