CSS selector for innermost tables?

Question

Is there a way to select only the innermost tables? Are these the ones that don't contain more tables inside them?

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

Answer 1

With pure CSS, you cannot do this. With jQuery (which your question is related to) you can:

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

will select tables without child tables.

The :has() selector finds elements that have a specific child. :not() inverts the selection to those who do not have this particular descendant.

Answer 2

For those using the nokogiri CSS selector ,: :has() may be broken, so :not(:has(...)) will not work. Do you want to use xpath or some other way. See : there is a CSS pseudo-class in Nokigiri .

Answer 3

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

• Use a class or identifier to mark the table so you can select it.
• Use javascript to navigate the DOM tree.
• Use javascript library to select items. When you tagged your OP with the jQuery label, I would advise you to go for it.

Answer 4

Do you have a chance to add the class="innermost" attribute to the table? Thus, it is simply moss easier.