CSS Selector nth-child

Question

I am facing issues writing a slightly complex CSS selector.

I want to select a div with "class" containing 'btn-group', but not 'open'

So I have something like;

div[class*='btn-group']:not([class='open'])

Now the issue is that there are around 5-6 elements that match the above condition. But I want to select the first out of that. How do I do the same?

Would prefer doing using nth-child..

Terry · Accepted Answer · 2013-10-17 10:05:33Z

6

What about: div[class*='btn-group']:not(.open):first-of-type?

[Edit]: This trick does not work if you have <div class="btn-group open"></div> as the first child... (as explained by @Jukka below) a JS-based trick will work, tho:

$("div[class*='btn-group']").not(".open").first()
    .css({...});

    // OR add a class
    // .addClass("class");

http://jsfiddle.net/teddyrised/LdDCH/

edited Oct 17, 2013 at 10:05

answered Oct 17, 2013 at 9:49

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jukka K. Korpela Over a year ago

Whether it works depends on context, but generally it doesn’t, because :first-of-type only tests whether the element is the first div child of its parent.

Terry Over a year ago

True enough — therefore I've added the jQuery alternative.

Vinay Pratap Singh Bhadauria · Accepted Answer · 2013-10-17 09:56:43Z

2

try like this

div [class*='btn-group']:not([class='open']):nth-child(1) {
    color:Red;
}

Using this you can select first child

Working Fiddle

answered Oct 17, 2013 at 9:56

Vinay Pratap Singh Bhadauria

9,9873 gold badges30 silver badges50 bronze badges

Comments

Jukka K. Korpela · Accepted Answer · 2013-10-17 10:07:14Z

1

You cannot. CSS selectors can’t be used that way. But if you provide a more specific HTML context (including containers for the div elements and a description of a pattern that the markup follows), there might be a way that works under some assumptions.

In particular, :nth-child and :nth-of-type only test whether the element is the *n*th child, or the *n*th child of its kind, of its parent. It does not take e.g. classes into account; the is no “nth of a class” selector.

answered Oct 17, 2013 at 10:07

Jukka K. Korpela

203k38 gold badges281 silver badges408 bronze badges

Collectives™ on Stack Overflow

CSS Selector nth-child

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related