Select recursive :last-child. Possible?

Question

In CSS, is it possible to recursively select all :last-child from body?

Given this markup:

<body>
  <div id="_1">
    <div id="_2"></div>
  </div>
  <div id="_3">
    <div id="_4">
      <div id="_5"></div>
      <div id="_6"></div>
    </div>
  </div>
</body>

I am looking for div no. 3, 4 and 6

Another way to put it is this:

body > :last-child,
body > :last-child > :last-child,
body > :last-child > :last-child > :last-child,
body > :last-child > :last-child > :last-child > :last-child {
  /* My stuff here */
}

But obviously this is not a good approach.

If one of the following were solved, we would be able to solve this one as well: https://stackoverflow.com/questions/10227375/css-not-selectors-and-selecting-descendants | https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector by checking that there is no non-last parent. — Ciro Santilli OurBigBook.com, Apr 28 '20 at 07:02

score 7 · Accepted Answer · edited Jun 20 '20 at 09:12

No, unfortunately that's just about the only way to do it without modifying the HTML.

There has been at least one request for recursive versions of the :first-child and :last-child pseudo-classes, but it doesn't seem to have gained much favor. Notice it suggests nesting and repeating the pseudo-classes in the same way as in your question:

Currently, AFAIK, we can only match children up to some exact nesting level known in advance (3 in the example below):
.container > :first-child,
.container > :first-child > :first-child,
.container > :first-child > :first-child > :first-child {}
We cannot use just :first-child context selector since it would also select first children of blocks that are not first children themselves.

So we need a sort of recursive selector that matches not just first of last child, but recursively matches all first-most and last-most elements regardless of their nesting level.

Ok, I was affraid of that. Thanks. – Lasse Skindstad Ebert Sep 18 '12 at 13:04 — Lasse Skindstad Ebert, Sep 18 '12 at 13:04

Andy · Answer 2 · 2020-09-15T13:26:57.907

2

body :last-child {
    color:red;
}
body :not(:last-child) :last-child {
    color:initial;
}

Any last-child element that's a descendant of one that's not a last-child will have the change reversed.

edited Sep 15 '20 at 13:26

answered Mar 12 '19 at 14:58

Andy

1,264
1
10
16

Any last-child element that's a descendant of one that's not a last-child will have the change reversed. – Andy Mar 13 '19 at 12:43
add this into the answer – Aniket G Mar 14 '19 at 00:55
1

This is tempting. But you have to be fine with having `color:initial;` on the non selected elements, or you have to fight it off with more specific selectors. – Ciro Santilli OurBigBook.com Apr 28 '20 at 07:04

Starx · Answer 3 · 2012-09-18T13:00:09.390

0

No need to chain all the way. It would be simply like this

div:last-child {
   /* Your GREAT css */
}

Demo

Update: On that case, give the div2 a typical class and use :not() to push out of the selection

div:last-child:not(.nolist) {
    border: 1px solid red;
}

Demo

edited Sep 18 '12 at 13:00

answered Sep 18 '12 at 12:46

Starx

77,474
47
185
261

1

That would also select div no. 2. – Lasse Skindstad Ebert Sep 18 '12 at 12:48
@LasseDahlEbert, Misunderstood the question. Its actually very simple. See the update and the demo :) – Starx Sep 18 '12 at 12:53
Thanks for the answer, but it is not what I'm looking for. See this forked demo: http://jsfiddle.net/HHKc7/ - I don't want div 2 – Lasse Skindstad Ebert Sep 18 '12 at 12:55
2

Hi Starx - thank for your effort, but I'm looking for a very general way of selecting 'the path of :last-child'. If I had a specific case, I would propably class my way out of trouble as you suggest. – Lasse Skindstad Ebert Sep 18 '12 at 13:02

Select recursive :last-child. Possible?

3 Answers3

Demo

Linked