Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select all 'tr' except the first one

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;
}

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)

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}

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 ... { ... })


Another option:

tr:nth-child(n + 2) {
    /* properties */
}

Though the question has a decent answer already, I just want to stress that the :first-child tag goes on the item type that represents the children.

For example, in the code:

<div id"someDiv">
     <input id="someInput1" /> 
     <input id="someInput2" />
     <input id="someInput2" />
</div

If you want to affect only the second two elements with a margin, but not the first, you would do:

#someDiv > input {
     margin-top: 20px;
}
#someDiv > input:first-child{
     margin-top: 0px;
}

that is, since the inputs are the children, you would place first-child on the input portion of the selector.