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;
}
Nikola K.
  • 7,093
  • 13
  • 31
  • 39
Nick
  • 2,715
  • 4
  • 24
  • 35
  • 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 '10 at 02: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 '10 at 02:26
  • Cori's approach will work on browsers all the way back to ie4, maybe earlier. – kibibu Mar 22 '10 at 02:31

3 Answers3

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.

Dinei
  • 4,494
  • 4
  • 36
  • 60
Knu
  • 14,806
  • 5
  • 56
  • 89
  • 2
    that's a nice css3 selector to be aware of - hopefully usable in IE9. – cori Mar 22 '10 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. – gingerbreadboy May 25 '12 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. – Pedro Moreira Apr 15 '14 at 09:12
  • In ≤IE8 this will be completely ignored forcing no tables to get `color:red`. This might be good for some but for me I was hoping it would read it like `table {color:red;}` and just ignore the `:not()`. – DutGRIFF May 11 '14 at 02:53
  • can I have like: ` not(.classOne .classTwo .classThree) ` ? – Francisco Corrales Morales Aug 15 '14 at 17:18
  • 7
    @FranciscoCorralesMorales `:not(.classOne):not(.classTwo)` cf http://stackoverflow.com/a/5684168/248058 – Knu Aug 17 '14 at 14:48
  • @soundwave [it depends](https://drafts.csswg.org/selectors-4/#ref-for-simple%E2%91%A0%E2%91%A0). – Knu Nov 29 '19 at 19:04
  • How can this be extended to the children of `.dojoxGrid` without having to list all classes inside that element? – molerat Nov 09 '20 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?

cori
  • 8,666
  • 7
  • 45
  • 81
  • 3
    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 '10 at 02: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 '10 at 02: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.

Joel
  • 19,175
  • 2
  • 63
  • 83