javascript - CSS selector for innermost TABLEs? - Stack Overflow

admin管理员组

文章数量:1315982

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.

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.

• javascript
• jquery
• css
• jquery-selectors

Share Improve this question Follow edited Mar 6, 2010 at 0:00 cletus 625k169169 gold badges919919 silver badges945945 bronze badges asked Mar 5, 2010 at 7:39 tawtaw 18.9k1515 gold badges5959 silver badges8080 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 12

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.

本文标签： javascriptCSS selector for innermost TABLEsStack Overflow