131

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;
}
3
  • 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
    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
    Mar 22, 2010 at 2:26
  • Cori's approach will work on browsers all the way back to ie4, maybe earlier.
    – kibibu
    Mar 22, 2010 at 2:31

3 Answers 3

230

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

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

It's not supported by ≤ IE8 though.

8
  • 2
    that's a nice css3 selector to be aware of - hopefully usable in IE9.
    – cori
    Mar 22, 2010 at 19:44
  • 5
    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. May 25, 2012 at 11:10
  • 3
    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. Apr 15, 2014 at 9:12
  • 7
    @FranciscoCorralesMorales :not(.classOne):not(.classTwo) cf stackoverflow.com/a/5684168/248058
    – Knu
    Aug 17, 2014 at 14:48
  • 1
    How can this be extended to the children of .dojoxGrid without having to list all classes inside that element?
    – molerat
    Nov 9, 2020 at 15:15
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?

2
  • 4
    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.
    – kibibu
    Mar 22, 2010 at 2:26
  • 1
    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.
    – Nick
    Mar 22, 2010 at 2:31
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.