Is there an css trick to emulate CSS4 :blank selector?

Question

If you want to select nodes without any children you might think about using :empty. Meanwhile the behaviour of :empty is very annoying as any whitespace will make that rule not apply. :blank selector comes here as a saviour but no browser has implemented it yet.

Do you know of any trick to select elements with no other elements inside?

Just to stimulate your imagination: what about something like .parent:not(:scope > *)

Answer 1

Selectors don't match text nodes, so there is no way to emulate either :blank, or :empty using a selector.

Taken literally, .parent:not(:scope > *) represents any .parent element that is not a child of the :scope element, whatever that scoping root may be. If the selector is not scoped, then it is equivalent to .parent:not(:root > *), or if it appears in a scoped stylesheet, generally it means any such element that is not a sibling of the style element representing this scoped stylesheet.

I suspect you mean something like .parent:not(:has(> *)), which will match .parent elements that don't have element children, but it doesn't take into account their text contents, again for the same reason I mentioned.

The good news is, while you still have to wait for vendors to get around to implementing this new feature, instead of implementing it in a separate :blank pseudo they're considering modifying the functionality of :empty instead, provided it doesn't break too many sites. See this answer.