How to stop colgroup styles being overwritten by tr styles?

Question

Hi guys I have a table like that?

<table>

<colgroup>
    <col class="selected">
    <col>
</colgroup>

    <tbody>
      <tr>
          <td>lorem</td>
          <td>lorem</td>
      </tr>
    </tbody>
</table>

and my styles are:

col.selected {
background-color: #f3f3f3; /*for selected column*/
}

table tbody tr:nth-of-type(2n+2){
background-color:#fafafa; /*zebra effect*/
}

all works great however the zerba style owerites col selection style. Any ideas how to avoid that so the selected column will be using style from col rather than nth child ?

Please add a working sample... – Jarno Argillander Nov 19 '11 at 12:49 — Jarno Argillander, Nov 19 '11 at 12:49
see the one above - 100% fully working – Marcin Nov 19 '11 at 13:00 — Marcin, Nov 19 '11 at 13:00

Madbreaks · Answer 1 · 2013-05-09T19:21:45.310

1

The problem is that the selector for the zebra background has a higher specificity than the col selector. Either give the col selector a higher specificity, or give the tr selector a lower one (or both). If they're equal, order of rules in your CSS matters.

table colgroup col.selected {
    background-color: #f3f3f3; /*for selected column*/
} /* specificity: 13 */

table tr:nth-of-type(2n+2){
    background-color:#fafafa; /*zebra effect*/
} /* specificity: 12, will be overridden */

edited May 09 '13 at 19:21

answered May 09 '13 at 19:02

Madbreaks

19,094
7
58
72

TIL about **specificity**. Thanks! – Matías Cánepa Nov 20 '13 at 15:13

score 0 · Answer 2 · answered Nov 19 '11 at 12:52

0

Your code looks fine other than your col in the html doesn't have a selected class applied. Could this be your problem on the actual page (I relise you've only posted a code sample).

answered Nov 19 '11 at 12:52

Chris Felstead

1,170
1
9
19

nope, this is done thorugh js etc but to avoid confusin i will update quetsion – Marcin Nov 19 '11 at 12:59
also the code above is OK I know, but the thing is that col.selected style is being overwritten on nth rows and my questions is whether this can be avoided or no, thanks – Marcin Nov 19 '11 at 13:01
A working example will help but remember that css is applied top down. Therefore, if both zebra and selection css applies to the col, your bottom css will win out. – Chris Felstead Nov 19 '11 at 13:01
not really, if you move down col.selected it won't help either – Marcin Nov 19 '11 at 13:07

score 0 · Accepted Answer · answered Nov 19 '11 at 13:01

As far as I know, you can't. The best work-around may to be dynamically render some CSS that highlights the correct column. To highlight the second column of a table, for example, you could use:

table tbody tr td:nth-child(2) {
    background-color:red;  
}

Example here: http://jsfiddle.net/ChrisPebble/tbLrv/

How to stop colgroup styles being overwritten by tr styles?

3 Answers3