Search code examples
csscss-selectorsclickcss-tables

Select table rows without table headers using css selector

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?

Solution

  • 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');