CSS Selector to Get Deepest Element of Specific Class in the HTML Tree

$('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>

How to find deepest element from a HTML tree with a certain class?

And a vanilla version :

function deepest (subMenu, select) { 
  return [].slice.call (subMenu.querySelectorAll (select)).reduce (
    function (deepest, el) {
      for (var d = 0, e = el; e !== subMenu; d++, e = e.parentNode);
      return d > deepest.d ? {d: d, el: el} : deepest;
    }, {d: 0, el: subMenu}).el;
 };

call with

deepest (subMenu, '.active');

where the second parameter selects the elements to be considered.

Tested on a modified version of @Rory's fiddle

Can you target a specific element among the results of a css selector independent of it's location? or relation?

I just saw some clarification to the question. Here is a much simpler fiddle to get all spans with "aClass" into a list that will let you target the nTh span. Still using Jquery instead of CSS.

https://jsfiddle.net/h2e0xgwf/6/

$(document).ready(function(){
var nTh = 5;  // change this to whichever N you wish
var allSpans = $("div > span.aClass");
$(allSpans[nTh-1]).html($(allSpans[nTh-1]).html() + " : found the " + nTh + "th element").css("background-color", "blue").css("color","white");



 });

Can you target a specific element among the results of a css selector independent of it's location? or relation?

I just saw some clarification to the question. Here is a much simpler fiddle to get all spans with "aClass" into a list that will let you target the nTh span. Still using Jquery instead of CSS.

https://jsfiddle.net/h2e0xgwf/6/

$(document).ready(function(){
var nTh = 5;  // change this to whichever N you wish
var allSpans = $("div > span.aClass");
$(allSpans[nTh-1]).html($(allSpans[nTh-1]).html() + " : found the " + nTh + "th element").css("background-color", "blue").css("color","white");



 });

Selecting the last element among various nested containers

If I understand your question correctly, you want to target the last li tag in multiple uls, where the number of nesting levels in the uls is unpredictable.

You want a selector that targets the "last and deepest element" in a containing block where the number of elements preceding it in the block are unknown and irrelevant.

This doesn't appear to be possible with Selectors 2.1 or Selectors 3.

The :last-child, :last-of-type and nth-child pseudo-classes work when the nesting levels are fixed. In a dynamic environment where there are multiple lists of varying nesting levels these selector rules will break.

This will select the last li in the first level ul:

div.case > ul > li:last-child

This will select the last li in the second level ul:

div.case > ul > li:last-child > ul > li:last-child

This will select the last li in the third level ul:

div.case > ul > li:last-child > ul > li:last-child > ul > li:last-child

and so on...

A solution, however, may exist in Selectors 4, which browsers haven't yet implemented:

li:last-child:not(:has(> li))

This rule targets last child lis that have no descendant lis, which matches your requirement.

For now, however, if you know the nesting level for each of your ul containers you can apply a class to each targeted li.

^{Thanks @BoltClock for help crafting the Selectors 4 rule (see comments).}

---

Related Topics