Adjacent Sibling Selectors

The following styles are used here:

DIV, P	{color: black; background: white; }
DIV + P	{color: green; background: white; }
EM, STRONG	{color: black; background: white; }
EM + STRONG	{color: purple; background: white; }
STRONG+EM	{color: blue; background: white; }
UL+OL	{ color: navy; background: white; }
LI	{ color: inherit; background: white; }
.warn+.rant	{ color: maroon; background: white; }
.second + .third { color: red; }
.first .third { color: green; }
.greedtest + div p { color: maroon; }
This should be black.

This should be green.

This should be black.

This should be black.
This should be black.

This should be green.

This should be black. This should be black. This should be purple. This should be blue. This should be black. This should be black. This should be purple (thanks to consensus over a spec ambiguity). This should be black. This should be blue. This should be black. This should be purple.

  1. This is an item in an ordered list. This should be navy.

This should be the default color. It has class="warn".

This should be maroon. It has class="rant".

Text
This should be green.

This should be green.

This should be maroon.


Valid HTML 4.0!

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org