views:

55

answers:

3

Is there any way to select only innermost tables? That is ones that do not contain any more tables inside them?

I know I can filter by element.getElementsByTagName("table").length == 0, I'm just wondering if there's a more elegant solution.

A: 

As far as I know there is no CSS selector that fits your need. However, there are several options:

  1. Use a class or an id to mark the table so that you can select it.
  2. Use javascript to navigate the DOM treee.
  3. Use a javascript library to select the elements. As you tagged your OP with the jQuery tag I'd suggest that you go for that.
Obalix
A: 

Do you have a chance to add a class="innermost" attribute to the table? That way, it's just moch simpler.

Kerido
I don't have full control over that HTML, so I'd first have to find all innermost tables by JS, then .addClass('innermost') on them... but once I've found all innermost tables, I'm done anyway.
taw
+10  A: 

With pure CSS you can't do this. With jQuery (which your question is tagged with) you can:

$("table:not(:has(table))")...

will select tables with no child tables.

The :has() selector finds elements elements that have a particular descendant. :not() inverts the selection to those that don't have that particular descendant.

cletus