Css Selector for a class except the first element

Question

I have the following divs:

<div id="container">
    <div class="different_class"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

I want to apply a border to all the children divs with (.child), except the first one. so in the end all the children divs except (.different_class) and (.child:eq(0)) (I don't want to use nth-child as in the real problem I might not have .different_class div) will have the border.

I think the solution might be to use :not() selector, but I'm not quite sure how. Thanks'

:eq() is not a CSS selector by the way. It's part of jQuery. — BoltClock
– BoltClock, Commented Aug 18, 2012 at 2:01

user1289347 · Accepted Answer · 2012-08-17 22:20:33Z

6

try this http://jsfiddle.net/5XuE3/

#container div.child + div.child
{
border: solid 1px black;
}

answered Aug 17, 2012 at 22:20

user1289347

2,4071 gold badge14 silver badges16 bronze badges

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

Comments

Savas Vedova · Accepted Answer · 2012-08-18 13:03:57Z

2

.child { some css }
.child:first-child { other styling }

EDIT

Why does not work? Check this jsfiddle.

edited Aug 18, 2012 at 13:03

answered Aug 17, 2012 at 22:21

Savas Vedova

5,7023 gold badges30 silver badges45 bronze badges

3 Comments

Alvaro Over a year ago

This doesn't work, "so in the end all the children divs except (.different_class) and (.child:eq(0))" thanks anyway

Savas Vedova Over a year ago

@Alvaro please see the update. Although I see now that you do not ask for the nth-child, it still works. Only tested with Chrome though.

BoltClock Over a year ago

There is no .different_class in your fiddle!

Francisco Romero · Accepted Answer · 2017-11-21 16:54:31Z

+ selector will work in this case because all elements that have child class are together but it would not work if another different element (or with another class) will be between them.

This happens because + selector will match all elements that are placed immediately after another div.child.

Example:

#container div.child + div.child{
  border: 1px solid;
}

<div id="container">
    <div class="different_class">Test</div>
    <div class="child">Test</div>
    <div class="child">Test</div>
    <div class="different_class">Test</div>
    <div class="child">Test</div>
    <div class="child">Test</div>
</div>

To avoid that, we can use ~ selector, that will match all elements that are preceded by div.child, not necessary that it will be immediately after it. So it will not match the first div with child class but will match the rest of divs with child class without take in consideration the rest of elements.

Example:

#container div.child ~ div.child{
  border: 1px solid;
}

<div id="container">
    <div class="different_class">Test</div>
    <div class="child">Test</div>
    <div class="child">Test</div>
    <div class="child">Test</div>
    <div class="child">Test</div>
</div>

Collectives™ on Stack Overflow

Css Selector for a class except the first element

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related