select the most nested element with same classes - html

Question

i'm trying to make some special menu but i have a problem with selecting the most nested element (div) . Menu will be dynamic so it can change how much divs will be nested in one div. (parents will be created with new childs) so i need to select the last one (the most nested) without using more classes od Ids.
Here is a code i wrote until now:
<div id="strategy">
<div class="selected">
0
<div class="selected">
some text
<div class="selected"> this is the last div, but it can be anytime changed and more childs of this element can be created</div>
</div>
</div>
<div class="selected">
1
</div>
<div>
2
</div>
</div>
and something of css i tried:
div.selected:only-of-type {background: #F00;}
also tried nth:last-child, only-child.. i think everything but there must be some way how to do it.

Answer 1

if you're open to jQuery...
$(document).ready(function() {
var $target = $('#strategy').children();
while( $target.length ) {
$target = $target.children();
}
var last = $target.end(); // You need .end() to get to the last matched set
var lastHtml = last.html();
$('body').append('<strong>deepest child is: ' + lastHtml + '</strong>');
last.css('color', 'blue');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="strategy">
<div class="selected">
0
<div class="selected">
some text
<div class="selected"> this is the last div, but it can be anytime changed and more childs of this element can be created</div>
</div>
</div>
<div class="selected">
1
</div>
<div>
2
</div>
</div>