Test of CSS2's Universal Selector

This is a test of CSS2's Universal Selector, which is very important in cascades of stylesheets, because it would allow an author to override a user, even if the user has set styles in odd ways, for example, by declaring UL EM to have a background-color than would be illegible on the author's page. This makes it so that the author does not have to declare styles for every possible selector that could address the elements on his page.

The following styles are applied here:

 
P.two	{
	color: black;
	background-color: white;
	}

*	{
	color: #800 ! important;
	background-color: yellow;
	}

P.three	{
	color: green ! important;
	}

DIV.four	{
	background-color: #8F8;
	margin-top: 1em;
	margin-bottom: 1em;
	}

DIV.five, DIV.five *	{
	background-color: #BBF;
	margin-top: 1em;
	margin-bottom: 1em;
	}

/* For legibility */
A:link, A:visited	{
	color: blue ! important;
	}

*#seven	{
	background-color: black;
	color: white ! important;
	}

*.eight	{
	background-color: blue;
	color: yellow ! important;
	}

P.nine * EM	{
	background-color: green;
	color: white ! important;
	}

BLOCKQUOTE*EM {
	color: aqua;
	background-color: green;
	}

The background of this document should be yellow, and this paragraph should have dark red text. If these are not true, then the universal selector is not working at all. However, if the text is dark red but the background is light blue, then DIV.five * is being misinterpreted as *.

This paragraph (two) should also have dark red text, because the color in the universal selector is marked as important. However, its background should be white because the universal selector should be overridden based on specificity.

This paragraph (three) should have green text on the original yellow background.

This DIV (four) should have a light green background.

However, this paragraph should have a yellow background.

Now there should be a light green background again.
This DIV (five) should have a light blue background.

This paragraph should also have a light blue background.

Here there should still be a light blue background.

This paragraph should have white text on a black background.

This paragraph should have yellow text on a blue background.

There should only be two words in this paragraph that have white text on a green background.

There should be two words in this sentence that are dark red on a green background. (The spec has been changed so this test is no longer correct.)


Valid HTML 4.0!

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org