Target the deepest nested ul/ol element with css

Question

In a nested list like the one below, how would one target the ul containing joe without knowing the actual depth in advance?

<ul>
    <li>foo
        <ul>
            <li>bar
                <ul>
                    <li>baz
                        <ul>
                            <li>joe</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

http://jsbin.com/fiqowuhate/1/edit?html,css,output

possible duplicate of [CSS selector to get deepest element of specific class in the HTML tree](http://stackoverflow.com/questions/5247888/css-selector-to-get-deepest-element-of-specific-class-in-the-html-tree) — Kaiido, Jan 30 '15 at 11:04

score 4 · Accepted Answer · edited May 23 '17 at 12:28

4

As far as I am personally aware, this is not possible as there is currently no parent selector in CSS, but you could use the jQuery selector $('ul:not(:has(ul))'); to target ul elements without any ul children, and add a class to them.

Example

edited May 23 '17 at 12:28

Community

1
1

answered Jan 30 '15 at 10:29

Andy

3,645
2
25
33

2

Great answer! This question got my head in a spin checking all the lastest possible selectors here for a possible answer. http://dev.w3.org/csswg/selectors-4/ – Aaron Jan 30 '15 at 11:09
@Aaron Hey, thanks. The latest CSS selectors are great and I'm sure this would be possible one way or another but they always seem to be limited by browser support. Argh! – Andy Jan 30 '15 at 11:13

score 0 · Answer 2 · answered Jan 30 '15 at 11:53

0

var str = $("ul>li:last").text(); alert("Deepest value :- " +str);

answered Jan 30 '15 at 11:53

user1093452

121
2
3
18

This doesn't work if there are multiple elements at the top level: http://jsfiddle.net/5pmbed57/ – Andy Jan 30 '15 at 12:00

Target the deepest nested ul/ol element with css

2 Answers2