Select all 'tr' except the first one

Question

How can I select all tr elements except the first tr in a table with CSS?

I tried using this method, but found that it did not work.

Answer 1

By adding a class to either the first tr or the subsequent trs. There is no crossbrowser way of selecting the rows you want with CSS alone.

However, if you don't care about Internet Explorer 6, 7 or 8:

tr:not(:first-child) {
    color: red;
}

Answer 2

ideal solution but not supported in IE

tr:not(:first-child) {css}

second solution would be to style all tr's and then override with css for first-child:

tr {css}
tr:first-child {override css above}

Answer 3

I'm surprised nobody mentioned the use of sibling combinators, which are supported by IE7 and later:

tr + tr /* CSS2, adjacent sibling */
tr ~ tr /* CSS3, general sibling */

They both function in exactly the same way (in the context of HTML tables anyway) as:

tr:not(:first-child)

Answer 4

Sorry I know this is old but why not style all tr elements the way you want all except the first and the use the psuedo class :first-child where you revoke what you specified for all tr elements.

Better descriped by this example:

http://jsfiddle.net/DWTr7/1/

tr {
    border-top: 1px solid;
}
tr:first-child {
    border-top: none;   
}

/Patrik

Answer 5

sounds like the 'first line' you're talking of is your table-header - so you realy should think of using thead and tbody in your markup (click here) which would result in 'better' markup (semantically correct, useful for things like screenreaders) and easier, cross-browser-friendly possibilitys for css-selection (table thead ... { ... })

Answer 6

You could create a class and use the class when you define all of your future 's that you want (or don't want) to be selected by the CSS.

This would be done by writing

<tr class="unselected">

and then in your css having the lines (and using the text-align command as an example) :

unselected {
  text-align:center;
}



selected {
  text-align:right;
}