Child Selectors Test

The styles on this page are:

BODY > P	{
	color: red;
	background: white;
	}

BODY>BLOCKQUOTE	{
	color: green;
	background: white;
	}

DIV OL>LI P	{
	color: blue;
	background: white;
	}

HTML>BODY>DIV>UL>LI	{
	color: purple;
	background: white;
	}

HTML>DIV>UL>LI>EM	{ /* no BODY */
	color: red;
	background: white;
	}

.warn { color : black; background: white; }

.warn>.rant { color: purple; background: white; }

.rant >.note { color: green; background: white; }

.note > .test { color: blue; background: white; }

.first > .second { color: red; }
.first .second { color: green; }

body > div p.process { color: aqua; }

This P should be red.

This P should not be red, since it is in a DIV.

This BLOCKQUOTE should be green.

This BLOCKQUOTE should not be green, since it is in a DIV.

This text should be blue.

1. This text should be blue.

This text should be blue.

This text should be purple, but the emphasized text should not be red.

This should be black.

This should be purple.

This should be green.

This should be blue.

This should be green.

This should be aqua (this test is harder than the others!).

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org