This page demonstrates the use of :not(:empty) and :empty as posted here: https://www.electrictoolbox.com/css-not-empty-selectors/.
We have two styles defined in the stylesheet on this page:
.test1:not(:empty) { border: 1px solid red; padding: 10px; } .test2:empty { border: 1px solid blue; }
The first paragraph below has the CSS class "test1" and contains content, so it has a red border and extra padding.
Paragraph 1
The second paragraph below also has the CSS class "test1" but is empty (other than an HTML comment); because it is empty, the :not(:empty) style does not apply.
The third paragraph below has the CSS class "test2" and contains content; .test2:empty does not apply so it has no styling in addition to the browser's default.
Paragraph 3
The final paragraph below has the CSS class "test2" and but is empty; .test2:empty does apply so we see a blue border and no content.
This has been tested with a <!doctype html> and has the following browser support, according to W3Schools (:not & :empty):
I've personally tested it myself on the following, which it works on:
And of course I double checked that it doesn't work in IE8, and it doesn't.