Selecting the Last Element Among Various Nested Containers

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).}

overall last-child in nested div structure

In this particular case, the selector would have to be

.text > div:last-child > p:last-child { ... }

or in SCSS

.text {
     p {
       margin-bottom: rem(22);
     }
     div:last-child {
        p:last-child {
          margin-bottom: 0;
        }
    }
 }

}

CSS3 to get the last li from the top level list in a nested ul

It says to get the link in the last li in the first ul in any nesting level, which is why you're getting the item in the nested list as well.

To prevent this, use child selectors to limit only to the immediately-nested list items, instead of descendant selectors which disregard nesting levels:

.container > ul:first-of-type > li:last-child > a

CSS nth-of-type selector with nested elements

I basically need a selector that counts the boxes as if they were all direct children of the same parent .container (as if the .inner-container would not exist).

Assuming there will only be exactly one inner container — and no other elements besides .box and .inner-container — you'll need to use :nth-child() on the inner container to determine its position relative to its .box siblings (not its .box children), and thus determine whether to alternate the background on its contents one way or the other:

.container > .box:nth-child(even) {
    background-color: #bb3333;
}

.container > .inner-container:nth-child(odd) > .box:nth-child(even),
.container > .inner-container:nth-child(even) > .box:nth-child(odd) {
    background-color: #bb3333;
}

Here's a demo with the boxes appropriately labeled so you can see how each selector works.

Note that if you have any boxes that could appear after the inner container, you'll need to be able to count the number of children the inner container has before you can determine how to start counting from that point. This will not be possible with just CSS because selectors cannot ascend from inner elements to outer elements. There are workarounds using JavaScript, but I suspect this is outside the scope of the question at hand.

Selecting last child of recursive list structure with CSS

You can use some tricks to make it.

If you are looking for last element then you can use of :nth-last-child(n) selector, this matches on every element in the nth child and it doesn't look for type or its parent.

This is achieved as it counts from the last child.

.container ul li:nth-last-child(1)
{
    color: red;
    font-size:22px;
}
.container li li {
    color: green;
    font-size:12px;
}

Look at here:
MyFiddel

---

Related Topics