By adding a class to either the first tr
or the subsequent tr
s. 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 input
s are the children, you would place first-child
on the input portion of the selector.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With