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