How to choose the deepest use of a CSS class?
How to choose the deepest use of the css class?
In the following list, how to choose the deepest use of a class .active
, in this case <li>
wrapping <span>Item 1.1.1.1</span>
?
<ul>
<li class="active">
<span>Item 1</span>
<ul>
<li class="active">
<span>Item 1.1</span>
<ul>
<li>
<span>Item 1.1.1</span>
<ul>
<li class="active"> // need selector for this <li>
<span>Item 1.1.1.1</span>
<ul>
<li>
<span>Item 1.1.1.1.1</span>
</li>
<li>
<span>Item 1.1.1.1.2</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<span>Item 1.2</span>
<ul>
<li>
<span>Item 1.2.1</span>
<ul>
<li>
<span>Item 1.2.1.1</span>
<ul>
<li>
<span>Item 1.2.1.1.1</span>
</li>
<li>
<span>Item 1.2.1.1.2</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<ul>
source to share
You can use jQuery selectors :not
and :has
like below to select the deepest active li:
$('li.active:not(:has(.active))')
Description
jQuery( ":not(selector)" )
: Selects all elements that do not match the given selector.
jQuery( ":has(selector)" )
: Selects elements that contain at least one element that matches the specified selector.
The results show:
$('li.active:not(:has(.active))').css("border", "1px solid red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active">
<span>Item 1</span>
<ul>
<li class="active">
<span>Item 1.1</span>
<ul>
<li>
<span>Item 1.1.1</span>
<ul>
<li class="active">
<span>Item 1.1.1.1</span>
<ul>
<li>
<span>Item 1.1.1.1.1</span>
</li>
<li>
<span>Item 1.1.1.1.2</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<span>Item 1.2</span>
<ul>
<li>
<span>Item 1.2.1</span>
<ul>
<li>
<span>Item 1.2.1.1</span>
<ul>
<li>
<span>Item 1.2.1.1.1</span>
</li>
<li>
<span>Item 1.2.1.1.2</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<ul>
source to share
It will be ul .active .active .active li span
.
Based on this answer, you cannot select it dynamically.
Use js / jQuery to find the deepest node:
var deepest = null;
var depth = 0;
$('ul .active li').each(function () {
if ($(this).parents('.active').length > depth) {
depth = $(this).parents('.active').length;
deepest = $(this);
}
});
source to share