Retrieve the final element within an HTML framework

Is it possible to target the final div along with its content exclusively using CSS and child combinators? My goal is to apply custom styling to it.

<body>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      +
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Using :last-child selector does not allow for targeting elements this deeply nested in the hierarchy.

javascriptcssdom

Answer №1

The CSS selector div:(not(:has(div)) will target any DIV element that does not contain another nested DIV.

:has(selector) selects an element that contains an element matching the specified selector. Using it within :not() negates this condition.

Although a relatively new feature, this selector is not yet compatible with Firefox as of version 108. You can check the browser compatibility in the compatibility table.

div:not(:has(div)) {
  color: red;
}
<body>
  a
  <div>
    b
    <div>
      c
      <div>
        d
        <div>
          e
          <div>
            f
            <div>
              g
              <div>
                h
                <div>
                  i
                  <div>
                    j
                    <div>
                      +
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

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

tips for selecting various API requests based on the selected drop down menu choice

Hey there! I'm looking to enhance my login page by adding a feature that allows users to select from a dropdown menu with different options. Each option will be linked to a specific API, and based on the API response, the user's ability to log in ...

javascriptjqueryhtmlcssapi

Error occurs when making an Ajax request to a web URL using JavaScript

Lately, we have been successfully utilizing Ajax calls within our applications for URLs that are part of the server domain. However, when attempting to make an Ajax call to a URL on the web, it consistently fails without providing a clear error message. De ...

javascriptajax

Enhance the appearance and format of white space in JavaScript code

I'm in search of a solution to automatically beautify whitespace in my JavaScript code. I have come across tools like JSLint and JSHint that can check for indentation and trailing spaces, but they might not cover all types of whitespace issues. My ch ...

javascriptnode.jsgruntjscode-formatting

What causes the circular progress bar to disappear when hovering over the MUI React table?

My goal was to create a table with a CircularProgressBar that changes its background color from orange to dark blue when hovering over the row. However, despite my efforts, I couldn't get it to work as intended. Additionally, I wanted the progressBar ...

javascripthtmlcssreactjsmaterial-ui

Preventing event propagation in jQuery's click handler

Is it possible to prevent the propagation of a click event on a dynamically created div within its parent div? HTML <div id = "parent"> Some Stuff </div> Jquery $('#parent').click(function(){ $(this).append('<div class = ...

javascriptjquery

JavaScript scroll event not firing

I have searched multiple questions on SO to avoid duplication, but none of the solutions worked for me. My goal is to toggle the visibility of a button based on scroll position. I tried creating a scroll event listener to trigger a function that checks th ...

javascript

Looking for a method to select a random value from an array of objects without having to go through the entire parent array?

As a JavaScript newcomer, I am seeking assistance with a particular task. The array of objects in question looks like this: const data = { "Total_packages": { "package1": { "tags": [ "kj21", ...

javascriptarrays

Foundation 6 off-canvas-menu does not conceal the page that is currently visible to the user

I am currently working on a small viewport off-canvas menu using Foundation 6, but I am having trouble making it overlap the entire visible page area. The right-hand side underneath the off-canvas menu does not have background opacity. https://i.sstatic.n ...

javascriptjqueryhtmlcsszurb-foundation

Postpone an automatic action in React

I'm currently working on adding a fade out animation to a page change in React, but I need to delay the click event before the page actually transitions. Here's the code snippet I have so far: export default function Modal({setTopOf}) { const ...

javascriptreactjsnext.js

Retrieving the name of a child from a Firebase database

My database I am trying to extract the names of children from my database. The names include Coffee, Latte, Tea, and Ade. Any suggestions on how I can retrieve this information? ...

javascriptdatabasefirebasevue.jsfirebase-realtime-database

What is the best way to ensure that swal waits for a button click before proceeding

When submitting a form, I am utilizing swal("") to display a visual message to the user. The current code is functional, but the swal element disappears instantly. If I switch to using alert(""), the code works fine. However, my objective is to get it wor ...

javascripthtml

Using ASP.NET MVC 6 Web API along with Angular, a resource can be posted as an object property in the

I am facing a challenge in sending a complex object from Angular to my web API. Here is how the object looks: { Name: "test", Tax: 23, Addresses: [ { country: "ro", city: "bucharest" }, { country: "fr", ...

javascriptc#asp.netangularjsasp.net-mvc

Taking out the modal element from the document object model, causing the animation

I am currently working on a project using Next.js, Typescript, and Tailwind CSS. Within this project, I have implemented a modal component with some animations. However, I encountered an issue where the modal does not get removed from the DOM when closed, ...

javascriptreactjstypescriptnext.jstailwind-css

Ways to retrieve all elements, including those that are hidden, within a CSS grid

My goal is to retrieve all the "Available Items" using Javascript in one go. However, I am facing an issue where not all of them are visible at once due to the need to manually scroll through a CSS grid. <div class="gridWrapper" data-dojo-attach-point= ...

javascripthtmlcsspython-3.xselenium

Instructions for generating a download button

After receiving assistance on saving JSON as a file on the client side from this source, I managed to create a concise code snippet inside this fiddle. var link = document.createElement('a'); link.download = "backup.json"; link.href = ...

javascriptangularjs

Has the Soundcloud web widget API become obsolete?

I am currently working with the SoundCloud widget API (). My main goal is to retrieve information about the tracks within a set. Unfortunately, it seems like I am only able to utilize the methods widget.getSounds() and widget.getCurrentSound successfully ...

javascriptsoundcloud

Why is there an excessive amount of white space on my Reactjs page?

This webpage (page URL -) displays well without any white space between two images when viewed on a laptop. However, when accessed on a mobile device, it appears to be taking up too much space as shown in the image below. Image of webpage on laptop- lapto ...

cssreactjsmaterial-ui

Material-ui does not adjust Typography color based on the theme selected

Exploring material-ui, I have implemented two themes: const darkTheme = createMuiTheme({ palette: { type: "dark" } }); const lightTheme = createMuiTheme({ palette: { type: "light" } }); However, when utilizing the Typography component, t ...

javascriptreactjsmaterial-ui

The functionality of one button triggering the opening of two dropdown menus simultaneously is being successfully implemented

My issue is that I have created two different dropdowns, but they both open the same dropdown menu. Here is my code; <div class="d-flex"> <button class="btn btn-icon btn-group-nav shadow-sm btn-secondary dropdown-toggle" type="butto ...

javascripthtmlcssbootstrap-4

Achieving vscode syntax highlighting for Django template tags in JavaScript

Does anyone know how to enable proper Django syntax highlighting in Visual Studio Code when using Django template tags within HTML tags? ...

javascriptdjangovisual-studio-code