Is it possible to select the absolute last grand child of an element using only CSS?

Viewed 151
<div class="a">
  <div class="b">
    <div class="c"></div>
    <div class="c"></div>
    <div class="c"></div>
  </div>
  <div class="b">
    <div class="c"></div>
    <div class="c"></div> <!-- element to select -->
  </div>
  <div class="b">

  </div>
</div>

Using .a .b:last-child .c:last-child won't work in this case because of the last div.b which is empty.

1 Answers

No, it is not possible to have a selector that looks into the next sibling (to see if empty) and use it in a previous element of the DOM.

The :empty pseudo-class can help you to know if an element is empty but it won't help in your case.

:empty is supported in Chrome, Firefox, Safari, Opera 9.5+, Internet Explorer 9+, and on Android and iOS.

Also note that an element containing a space is not considered as empty.

Another not well known yet very useful selector is ~: which means any sibling that come after a specific DOM element. like a + except that ~ also target a .b + .b if there is another dom element in between that is not a .b like a br for instance.

I created a Codepen to explore convenient selectors, even if the response is "no you can't do it": https://codepen.io/antoniandre/pen/jOOmKmq

Related