What is the best way to choose the most profound utility of a CSS class?

How can I target the innermost use of a css class?

In this list, how do I select the deepest instance of the class .active, which in this case is the <li> element 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>
htmlcss

Answer №1

If you want to target the deepest active li element using jQuery, you can utilize the :not and :has selectors as shown in the code snippet below:

$('li.active:not(:has(.active))')

Explanation

The jQuery( ":not(selector)" ) method selects all elements that do not match the specified selector.

The jQuery( ":has(selector)" ) function selects elements that contain at least one element matching the given selector.

Here is what the outcome looks like:

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

Answer №2

It's located at 

ul .active .active .active li span
.

According to this post, it seems that selecting it dynamically may not be possible.

You can use JavaScript/jQuery to identify the deepest node:

var deepestNode = null;
var nodeDepth = 0;

$('ul .active li').each(function () {
    if ($(this).parents('.active').length > nodeDepth) {
        nodeDepth = $(this).parents('.active').length;
        deepestNode = $(this);
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending data through URL links in HTML

$.post("/diabetes/ropimages/getcount.php",{patientId:$("#patient_id").val()} ,function(data1){ //alert(data1); var count = data1; var patientId = $("#patient_id").val(); var reportId; for( var i = 1 ; i <= count ; i++) { var imageLink =&a ...

javascriptjqueryhtml

Interacting with a dialogue box in Protractor before the webpage fully loads

Currently, my challenge lies in clicking a dialog box that pops up before a page fully loads. To achieve this, I'm utilizing the browser.get(extensionHere) function to load the page, like so: it(..., function(){ browser.get('#/frontPage); ...

javascripthtmlangularjsseleniumprotractor

Swapping out ChildNode data for HTML elements

When attempting to replace a node value with HTML content, I encountered an issue where the HTML tags were being displayed on the HTML page instead of applying the intended style. <style> .YellowSelection { background: yellow; } < ...

javascriptjqueryhtml

The menu remains open at all times

Currently, I am developing a web-accessible menu that needs to comply with 508 standards. However, I encountered an issue where the menu does not close when I reach the last item using the TAB key on the keyboard. Additionally, I am looking for a solution ...

javascripthtmljquerycssdrop-down-menu

Guide on concealing and showcasing an icon within a bootstrap collapsible panel using solely CSS

Hey there, I've been working with Bootstrap's collapsible panel feature and I'm trying to get Font Awesome icons (+ / -) to display based on whether the panel is expanded or collapsed. I'm not too familiar with using CSS for this kind ...

htmlcss

Using Angular's ng-repeat directive to iterate over a list of <li> elements containing strings with

Query: <li ng-repeat='msg in msgs'>{{msg}}</li> Directive: msgs=['abc','a b v', '123'] msgs.push('Something entered from textarea, possibly containing line breaks') ...

javascriptcssangularjs

What is causing my column's content to be lacking padding on the left side and having excessive padding on the right side?

Edit: Here's the link to the codepen https://codepen.io/maptik/pen/bGKMgpJ In my React project, I'm utilizing Bootstrap to display cards for each "Product". Here is a snippet of how I am rendering it: <div className="container bg-color- ...

htmlcssreactjsfrontend

"Placing an image at the bottom within a DIV container in HTML

My goal is to neatly align a group of images at the bottom of a fixed-height div. The images all have the same height and width, making the alignment easier. Here is the current structure of my code: <div id="randomContainer"> <div id="image ...

htmlcssimagealignmentspacing

Navigate to the initial visible element on the specified webpage via the page hash link

In my handlebars HTML template, I have a partial view that includes different pieces of content for desktop and mobile. I use different CSS classes to hide and show these elements accordingly. <div class='hideOnMobile showOnDesktop'> < ...

javascriptjqueryhtmlcss

An Angular JS interceptor that verifies the response data comes back as HTML

In my current Angular JS project, I am working on implementing an interceptor to handle a specific response and redirect the user to another page. This is the code for my custom interceptor: App.factory('InterceptorService', ['$q', &ap ...

javascripthtmlangularjsintercept

Determine the number of XML elements and display the results for each XML element counted

I need assistance with a problem I am facing. I am extracting data from an XML API using PHP. Below is my code snippet: <?php $gigatools = simplexml_load_file('http://gigs.gigatools.com/u/A2LTD.xml'); echo "<table id='gigs_parse&apos ...

phphtmlxml

Issue with an Angular filter for formatting a lengthy JSON string onto separate lines within an HTML document

Just starting out with coding and working in Angular, I'm trying to display JSON data from Firebase in HTML. Here's the specific call I'm using: <p>{{workout[0].box.info.training.strength.exercise[1].movement.freetext }}</p> Th ...

javascripthtmljsonangularjs

What is the best way to place text beneath an input field?

Although it may seem simple, I am new to this and could use some help. I have an input box: <input type="text" name="username" id="username" class="form-control" value="{{username}}"> <div class="error" id="nameErr"></div> I have a func ...

javascriptcssnode.js

Changing the background color of the dropdown button in Vue Bootstrap: A step-by-step guide

I've been struggling to modify the background color of a dropdown button, but no method seems to work. I've attempted changing it by using ID, removing its class and applying a new one, and even using !important to override the styles, but the ba ...

javascriptcssvue.jsnuxt.jsbootstrap-vue

Ways to insert HTML text into an external webpage's div element without using an iframe

Is it possible to generate HTML and SVG code based on the position of a Subscriber on a web page or within a specific div? I would like to provide some JavaScript code that can be inserted inside a particular div on the page. Using an iframe is not ideal ...

javascripthtmlajax

The Bootstrap tooltip effectively fades away after displaying text, but it is not positioned correctly above the icon

Having some issues with my tooltip functionality. It seems to display the text on the left side and fades away upon mouseover, but it doesn't show up in a proper tooltip box over the icon as expected. I suspect that there might be a conflict between j ...

javascriptjqueryhtmltwitter-bootstrapsass

Utilize Z-index to hide elements from view

Encountering an issue with hiding other div elements when one is visible. In the code snippet below, I aim to make Pacific Rim and World War Z disappear using z-index when Star Trek is visible. Here's my HTML code: <!doctype html> <html ...

htmlcssz-indexcss-transitions

Navbar links in Bootstrap unexpectedly expanding in width

My website has a navigation menu that looks like this: https://i.stack.imgur.com/1R8mv.png However, when I click on a menu item, the link container inherits the width of the dropdown menu. Is there a way to prevent this using purely CSS? I am currently ...

htmlcsstwitter-bootstrapdrop-down-menudropdown

Enhance Your Website with GatsbyJS Custom Scrollbars

I'm struggling to customize the default scrollbar on my Gatsby website with an overlay scrollbar. I want to avoid the page 'shifting' slightly to the left when switching between pages that have scrollbars and those that do not. My attempt i ...

javascripthtmlcssreactjsgatsby

maximum allowed size for downloading manifest files

Exploring Manifest files and pondering an interesting scenario. Imagine a situation where a website sets up a manifest file requiring users to cache 3MB of data. For someone like me with limited iPhone storage running on 3G, this could quickly eat up my da ...

iphonehtmlmanifest3g