Demonstration of CSS :not(:empty) & :empty

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;
	}

Example 1

The first paragraph below has the CSS class "test1" and contains content, so it has a red border and extra padding.

Paragraph 1

Example 2

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.

Example 3

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

Example 4

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.

Browser support

This has been tested with a <!doctype html> and has the following browser support, according to W3Schools (:not & :empty):

Chrome 4.0+
Firefox 3.5+
Internet Explorer 9.0+
Safari 3.2+
Opera 9.6+

I've personally tested it myself on the following, which it works on:

Chrome 36 on Windows 7
FF29 on Windows 7
FF30 & FF32 on WindowsXP
IE9 on Windows 7
IE10 on Windows 8
IOS7
Default browser on Android 4.1.2 on a Sony Xperia Acro S
Chrome 36 on Android 4.1.2 on a Sony Xperia Acro S

And of course I double checked that it doesn't work in IE8, and it doesn't.