Style Using Nth-Child to Keep Table's Aspect (Alternating Row Colors) Updated

Alternate row colours from 2nd row of the table using CSS

You can used nth-child() css selector to chose odd and even. Then skip 2nd row by nth-child(2) selector.

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: green}
tr:nth-child(1) {
background:none;}

<table>
  <tbody>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
    </tr>
    <tr>
      <td>31</td>
      <td>32</td>
    </tr>
     <tr>
      <td>31</td>
      <td>32</td>
    </tr>
     <tr>
      <td>31</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

css tables: fixed column with alternate row colors?

You can just add a special case to the col1 class like so:

table.standings tr:nth-child(even),
table.standings tr:nth-child(even) .wb-standings-col1 {
  background: #f2f2f2
} 
table.standings tr:nth-child(odd),
table.standings tr:nth-child(odd) .wb-standings-col1 {
  background: #FFF
}

You can add another selector to the same CSS definition by using a comma to separate. That way you can still control both definitions by modifying a single CSS spec.

As to why this is happening.... I'm not really sure. I'm guessing it has something to do with the fact that the .wb-standings-col1 class is positioned absolutely and that messes with the rendering of the table underneath. I've noticed in Chrome's dev tools that that particular cell is set to display: block but the rest of the cells are set to display: table-cell. That may be another reason for it. Someone else will have to give you that answer :)

Way to alternate table row colours with inconsistent classes with css

This is not currently possible with a CSS-only solution. Until CSS allows combinations of pseudo-selectors or has another pseudo-selector created specifically as mentioned in the comments, this would require JavaScript.

CSS table with alternate background color with hidden elements

So try

<table class="grid">
    <tr class="parent"><td>nono1</td></tr>
    <tr class="parent"><td>nono2</td></tr>
    <tr class="parent"><td>nono3</td></tr>
    <tr class="parent"><td>nono4</td></tr>
    <tr class="display-none"><td>nono5</td></tr>
    <tr class="parent"><td>nono6</td></tr>
    <tr class="parent"><td>nono7</td></tr>
    <tr class="parent"><td>nono8</td></tr>
</table>

.parent:nth-child(odd) {
        background-color: #fff;
        }
        .parent:nth-child(even) {
            background-color: red;
        }

        /* after the first non-.parent, toggle colors */
        tr:not(.parent) ~ .parent:nth-child(odd) {
            background-color: red;
        }
        tr:not(.parent) ~ .parent:nth-child(even) {
            background-color: #fff;
        }

        /* after the second non-.parent, toggle again */
        tr:not(.parent) ~ tr:not(.parent) ~ .parent:nth-child(odd) {
            background-color: #fff;
        }
        tr:not(.parent) ~ tr:not(.parent) ~ .parent:nth-child(even) {
            background-color: red;
        }
        .display-none * {
            display: none;
        }

http://jsfiddle.net/vA5Wz/

Selecting every second visible table row

This jQuery snippet will do the job:

$('tr').removeClass('alternate')
$('tr:not(.hide):odd').addClass('alternate')

Play with it on the jsFiddle

Alternating table row color with the first row a different color

You just have to place the first-child rule after the rest, so it overrides them.

.butikHeader tr:nth-child(even) {
    background:#FFF;
    border:0px;
    color:#000;
}
.butikHeader tr:nth-child(odd) {
    background:#DFE7C0;
}
.butikHeader tr:first-child {
    background:#8AB512;
    color:#FFF;
}