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 green.

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.

• This is an item in an unordered list. This should be the default color.

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".

This should be green.

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org