nth-child doesn't respond to class selector

2019-01-14 01:02发布

站内文章 / HTML/CSS
8 0 0

问题:

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/

回答1:

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.



回答2:

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
}


回答3:

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

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


标签： css css-selectors
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~