is there a way to exclude a tag from css class

Question

I have css that works on all tr tags for the table.

so in my html I have no styling for tr tag. However, for one TR tag in my table I do not want to apply the TR that is generic to all tables. Is there a way to exclude this TR?

.statisticsTable {
    border:2px solid #990000;
    width:100%;
}
.statisticsTable tr {
    font-weight : bold;
    font-size : 9pt;
    font-family : Arial,Helvetica,sans-serif,Verdana,Geneva;
    color: #ffffff;
    background-color:#990000;

}

<table class="statisticsTable">
   <tr><td colspan="7" class="tableHeaderText">HUB Statistics</td></tr>
   <tr>
      <th colspan="2">HUB</th>
      <th >House Houlds Evaluated</th>
      <th >Total Debt Owed</th>
   </tr>

       <tr  class="<s:if test="#status.even">even</s:if><s:else>odd</s:else>">
           <td  rowspan=3 valign=top>213-65-6425</td>
           <td >All</td>
           <td >t1</td>
           <td >t2</td>

in above the <tr> that has class of either 'even' or 'odd' I do not want this <tr> to have .statisticsTable tr properties. is this possible?

Main think I want to avoid is background-color: #990000; and color: #ffffff;

score 42 · Accepted Answer · edited Mar 22 '13 at 08:35

42

CSS cascades, meaning you can overwrite the values of previously defined properties.

You would do:

.statisticsTable tr.even, .statisticsTable tr.odd {
    font-weight: normal;
    font-size: DEFAULT; /* what ever your default is */
    font-family: DEFAULT; /* what ever your default is */
    /* I would use the font shorthand property */
    color: DEFAULT;
    background: DEFAULT;
}

If you want to use CSS3, you can use :not to only apply the following styles to TR elements which don't have the even or odd class:

.statisticsTable tr:not(.even):not(.odd) {
    font: bold 9pt Arial,Helvetica,sans-serif,Verdana,Geneva;
    color: #fff;
    background:#990000;
}

EDIT: ~~not(.even,.odd)~~ is not valid syntax thus will not work (at least not in Chrome) correct syntax is :not(selector) , however you can do :not(selector1):not(selector2) these not()s are on the same level.

edited Mar 22 '13 at 08:35

jave.web

13,880
12
91
125

answered Apr 28 '09 at 23:52

Nick Presta

28,134
6
57
76

i dont understand the first answer. and as for second...we are supporting IE 6 so no css3 :( – Apr 28 '09 at 23:56
The first snippet goes after your styles for all TRs. In your code example, it would appear at the end, 'resetting' the styles you applied. – Nick Presta Apr 28 '09 at 23:57
2

He's saying that you can overwrite your original CSS rule by defining a rule with a more specific selector after it. – Calvin Apr 29 '09 at 00:05

score 2 · Answer 2 · answered Apr 28 '09 at 23:55

2

In a browser that supports CSS3 pseudo-selectors (this includes most browsers, notably inluding IE7 and IE88 and not IE6), a selector like .statisticsTable tr:not(.even):not(.odd) for that second rule grouping would do what you want.

answered Apr 28 '09 at 23:55

Anonymous

49,213
1
25
19

lsl · Answer 3 · 2009-04-28T23:59:57.663

0

You have a few options, the easiest I can see in your situation is override the CSS in statisticsTable with further CSS to the style you want in the classes 'even' and 'odd'.

edited Apr 28 '09 at 23:59

answered Apr 28 '09 at 23:49

lsl

4,371
3
39
54

I dont mind doing that but still how will i avoid the other properties that are in the CSS for tr tag. like font bold, size 9 and all that stuff. for even and odd I just have background-color white or grey. thats not a problem – Apr 28 '09 at 23:53

is there a way to exclude a tag from css class

3 Answers3

Linked

Related