How to create a css rule for all elements except one class?

Question

I have created a CSS stylesheet for my project. Is there any way I can create a css rule that applies to all table elements EXCEPT table elements belonging to the class "dojoxGrid"? Something like:

.not(dojoxGrid) table{
    width:100%;
    border-top:1px solid #dddddd;
    border-left:1px solid #dddddd;
    border-right:1px solid #dddddd;
    margin:1em auto;
    border-collapse:collapse;
}

Do you need this to work cross-browser? Browsers have differing support for the more flexible CSS selectors. It might be something you could do in script if it's absolutely required, and needs to be cross-browser. — kibibu
– kibibu, Commented Mar 22, 2010 at 2:21
yes I need it to work on major browsers. Is there any other way I can achieve it rather than through scripting? cheers — Nick
– Nick, Commented Mar 22, 2010 at 2:26
Cori's approach will work on browsers all the way back to ie4, maybe earlier. — kibibu
– kibibu, Commented Mar 22, 2010 at 2:31

Dinei · Accepted Answer · 2016-09-02 21:20:03Z

243

The negation pseudo-class seems to be what you are looking for.

table:not(.dojoxGrid) {color:red;}

It's not supported by ≤ IE8 though.

edited Sep 2, 2016 at 21:20

Dinei

5,7834 gold badges43 silver badges64 bronze badges

answered Mar 22, 2010 at 2:40

Knu

15.2k6 gold badges60 silver badges93 bronze badges

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

8 Comments

cori Over a year ago

that's a nice css3 selector to be aware of - hopefully usable in IE9.

gingerbreadboy Over a year ago

whilst my comment is not directly applicable to the question, it's worth noting that :not CAN be used as a jquery selector. ie $("[data-name='bob']:not(a)"), which is nice.

Pedro Moreira Over a year ago

This should be the accepted answer, because it is the answer to the desired effect. The current accepted answer is an alternative way of achieving the desired effect, but does not really answer the question. People that find this question, are very likely looking for the answer to what is exactly asked, in most cases an alternative way doesn't apply.

Knu Over a year ago

@FranciscoCorralesMorales :not(.classOne):not(.classTwo) cf stackoverflow.com/a/5684168/248058

molerat Over a year ago

How can this be extended to the children of .dojoxGrid without having to list all classes inside that element?

|

cori · Accepted Answer · 2010-03-22 02:24:40Z

14

Wouldn't setting a css rule for all tables, and then a subsequent one for tables where class="dojoxGrid" work? Or am I missing something?

answered Mar 22, 2010 at 2:24

cori

8,8607 gold badges49 silver badges82 bronze badges

2 Comments

kibibu Over a year ago

Yeah that would absolutely work, but you would be setting all those properties to a value. If you wanted to leave them "unset" then no. Presumably Nick is trying to not clobber the values for dojoxGrid as they're set elsewhere.

Nick Over a year ago

I think it would. However I am setting a bunch of properties for all tables, I could again overwrite them with the default values needed for the dojoxGrid. However I am not sure what these default values are as they are generated by the dojo library. Therefore I was looking for another way to achieve it.

Joel · Accepted Answer · 2010-03-22 02:32:59Z

4

The safest bet is to create a class on those tables and use that. Currently getting something like this to work in all major browsers is unlikely.

answered Mar 22, 2010 at 2:32

Joel

19.4k3 gold badges67 silver badges84 bronze badges

Collectives™ on Stack Overflow

How to create a css rule for all elements except one class?

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related