CSS selector for innermost TABLEs?

css, javascript, jquery, jquery-selectors

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.

Problem

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.

Original source