CSS selector for innermost TABLEs?

Is there any way to select o开发者_运维知识库nly 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.

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.

For those using CSS selectors in nokogiri, :has() may be broken, so :not(:has(...)) won't work. You'll want to use xpath or some other way. See :has CSS pseudo class in Nokogiri.

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.

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