выберите самый вложенный элемент с теми же классами

Question

Я пытаюсь создать специальное меню, но у меня проблема с выбором самого вложенного элемента (div). Меню будет динамическим, так что он может изменить, сколько divs будет вложено в один div. (родители будут созданы с новыми дочерними элементами), поэтому мне нужно выбрать последний (самый вложенный), не используя больше классов od Ids. Вот код, который я написал до сих пор:

<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> 

и что-то УСС я попытался:

div.selected:only-of-type {background: #F00;} также попытался энный: последний ребенок, только-ребенок .. я думаю, что все, но там должно быть каким-то образом, как это сделать.

Answer 1

, если вы открыты для 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>