Select table rows without table headers using css selector

Question

Using css selector how am i supposed to write a selector so that only table rows that have data display cursor as pointer. I tried below but nope

table tbody tr:not(tr>th)

is this cross browser and works event in IE6?

Answer 1

That is not a valid CSS selector; you can't put combinators inside :not().

Your best bet is to put header rows (i.e. <tr> elements that contain <th> elements) inside a <thead>, leave the rest of the rows in your table's <tbody>, and simply use this:

table tbody tr {
    cursor: pointer;
}

If you can't modify your HTML, it's not possible with CSS selectors alone, especially not with your requirement of supporting IE6. Use JavaScript instead; here's an obligatory jQuery example:

$('table tbody tr:not(:has(th))').css('cursor', 'pointer');

Answer 2

Assuming that your header row will always be the first row, you could do this:

table tr:not(:first-child) {
    background:red;
}​

This selects all tr elements except the first-child (as in, the first of the matched elements).

This does not work in IE6 or any other version of IE except IE9.

But yes, if you do require IE6 support, Javascript must be used.