Tuesday, May 3, 2011

is there a way to exclude a tag from css class

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;

From stackoverflow
  • 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'.

  • 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, .odd) {
        font: bold 9pt Arial,Helvetica,sans-serif,Verdana,Geneva;
        color: #fff;
        background:#990000;
    }
    
    Nick Presta : 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.
    Calvin : He's saying that you can overwrite your original CSS rule by defining a rule with a more specific selector after it.
  • 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.

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.