3
<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.

Temani Afif
  • 180,975
  • 14
  • 166
  • 216
bernk
  • 1,051
  • 2
  • 11
  • 19
  • you should really be doing some research before you ask this sort of question. Did you have difficulty finding an answer or reading the selector documentation? – Brett Caswell Oct 25 '19 at 00:21
  • 4
    not sure to understand all these *possible duplicate*. How they are related? and no, you cannot do this using CSS, you need JS/jQuery --> `$('.c:last')` will do it – Temani Afif Oct 25 '19 at 00:34
  • 1
    This is not a duplicate. – antoni Oct 25 '19 at 00:51
  • @antoni there are essentially infinite questions that could be asked about how to target specific elements and they will all boil down to the same answer; the flexibility they are after is not possible within the current CSS spec. – misterManSam Oct 25 '19 at 00:59

1 Answers1

0

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

antoni
  • 3,652
  • 25
  • 37
  • well.. I'm not sure you should be saying no with any certainty here.. there are logical and relational pseduo class selectors in working draft. `.a .b:nth-last-child(has( > .c)) .c:last-child` should work in that respect.. or some variation of it https://drafts.csswg.org/selectors-4/#relational – Brett Caswell Oct 25 '19 at 01:02
  • This is still no, you can't look ahead and use it in previous element selector, at least not for now :) – antoni Oct 25 '19 at 01:04