How do I select all the rows in a table, except a particular row, using CSS?

Question

I would like to apply a style to every row in a table except a specific row (could be the first, or could be one with a unique class or ID - doesn't matter).

How do I do that?

Answer 1

The easiest cross-browser way is to apply the style then override it, like this:

table tr td { background: blue; }
table tr.someClass td { background: none; }

Since the one with the class, ID, etc is more specific, it'll have the different styling...just put whatever properties you're setting for all rows in that selector so it overrides/reverses the styling. The benefit of this approach is it doesn't need any partially supported (CSS3) selectors, it already works in all browsers.

Answer 2

The obvious way would be:

tr { style for most rows; }
tr.specificrow { style for the specific row; }

and then

<table>
...
<tr>...</tr>
<tr class="specificrow">...</tr>
...
</table>

Answer 3

You could use the CSS3 :not() selector. It does exactly what you'd expect it to do.

table tr:not(.special) { color: green }

See this article for more information: The CSS3 :Not() Selector