CSS select the first element that doesn't have a class

Question

I have a couple of <div>s, and some of them have class: hidden, like this:

<div id="firstDiv" class="hidden">content</div>
<div id="secondDiv">content</div>

I know want to select the first <div> that has NOT the class: hidden. I was trying this so far in CSS: div:not(.hidden):first-child but it's not working.

How do I write the selectors correctly?

your current selector will catch the elements that don't have the .hidden class, and are first child of some element. — avrahamcool
– avrahamcool, Commented Oct 1, 2013 at 12:33

avrahamcool · Accepted Answer · 2013-10-01 12:39:49Z

8

you can use something like this

html

<div id="firstDiv" class="hidden">content</div>
<div id="secondDiv">content</div> <!-- only this one will be selected -->
<div id="thirdDiv">content</div>

css

div:not(.hidden)
{
    background-color: red;
}
div:not(.hidden) ~ div:not(.hidden)
{
    background-color: white; /*reset everything to normal*/
}

edited Oct 1, 2013 at 12:39

answered Oct 1, 2013 at 12:38

avrahamcool

14.1k5 gold badges49 silver badges59 bronze badges

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

11 Comments

MackieeE Over a year ago

+1 Nice Answer, Although it's not yet fully cross compatible I would believe?

avrahamcool Over a year ago

why not? it's a valid selector.

MackieeE Over a year ago

But don't worry, I am still upvoting =)!

avrahamcool Over a year ago

the OP also had a :not selector in his question.. so no problem here. & thanks for the UV

luca Over a year ago

@avrahamcool I am so so dumb. Even to dumb to simply copy&paste. I just had a misspelling. I guess I need a break right now ;_;

|

BoltClock · Accepted Answer · 2013-10-01 16:01:44Z

0

using the next sibling selector + you could write something that will always find the first div that is not hidden, after a hidden div.

div.hidden + div:not(.hidden) 
{
    background-color: #ff0;
}

http://jsfiddle.net/mbFFQ/

edited Oct 1, 2013 at 16:01

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

answered Oct 1, 2013 at 12:37

Stephen James

1,2879 silver badges18 bronze badges

1 Comment

avrahamcool Over a year ago

and if the not hidden is the first in the parent?

Collectives™ on Stack Overflow

CSS select the first element that doesn't have a class

2 Answers 2

11 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related