Use selector to get the inner child

Question

Is there a way to select the inner child (deepest) using css selectors. Se example below:

<div class='d1 view'>
    <div class='d2 view'>
        <div class='d3 view'></div>
    </div>
    <div class='d4 view'>
        <div class='d5 view'>
            <div class='d6 view'></div>
        </div>
    </div>
</div>

The d1-d6 classes is just for simplifying my question.

I now want to select d3 and d6.
Note the list of children can be infinite. So is there a way to select - using css selectors - the deepest child?

I made a JSFiddle using jQuery

same as http://stackoverflow.com/questions/5247888/css-selector-to-get-deepest-element-of-specific-class-in-the-html-tree — Jerome Cance, Aug 30 '11 at 07:59
look on http://reference.sitepoint.com/css/pseudoclass-nthchild — Haim Evgi, Aug 30 '11 at 08:00

score 3 · Accepted Answer · edited May 23 '17 at 12:03

3

Currently with CSS there is no way to select the deepest child of a parent element. You'll have to resort to jQuery to solve this.

There are a couple of questions that cover this already.

edited May 23 '17 at 12:03

Community

1
1

answered Aug 30 '11 at 08:00

Kyle

65,599
28
144
152

Use selector to get the inner child

1 Answers1