Style every thing except first child

Question

I know of the selector :not() but it doesn\'t work, like tr:not(tr:first-child):hover. I want to style the other trs but not the first one

Answer 1

You can only use simple selectors in :not(), try

tr:not(:first-child)

http://jsfiddle.net/mowglisanu/Sn7Uw/

Answer 2

Another option would be to use the th element which is specifically represents the header cell in a table.

Example

<table>
  <thead>
    <tr>
      <th>Number</th>
      <th>element</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>4.1.1</td>
      <td>html</td>
    </tr>
    <tr>
      <td>4.2.1</td>
      <td>head</td>
    </tr>
  </tbody>
</table>

Answer 3

Use the adjacent sibling combinator. As a bonus, it's a bit more widely supported than :not()

TR + TR { background-color: silver; }
TR + TR:hover { background-color: green; }

http://jsfiddle.net/ETYQN/2/

Answer 4

Put your headers in a <thead> and your stylable rows in the <tbody> then use:

tbody tr:hover { background: red }

and it won't matter what the contents is.

http://jsfiddle.net/stevemarvell/we4a6/