Attribute Selector Test

The styles here are the following:

H2	{color: black;}
H2[title]	{color: aqua;}
H2[title=Hello]	{color: blue;}
H2[ title ~= "Hello" ]	{font-family: sans-serif;}
H2[title~= "World"]	{color: green; }
H2[title ~ = "World"] { color: red; } /* this is invalid; does nothing */
P[lang="en"]	{font-family: sans-serif;}
P[lang= "en-US" ]	{text-transform: capitalize;}
P[lang |=en]	{color: purple; }
div[lang|="en"] { color: green; }
DIV[TITLE="Test"]	{ color: red ! important; }
DIV[ TITLE= "Test One"]	{ color: blue; }
DIV[TITLE=Test One] { color: red; } /* this is invalid; does nothing */
DIV[TITLE~="Test"]	{ background-color: yellow; }
DIV[TITLE~="Test"][TITLE~="Two"]	{ color: maroon; }
DIV[TITLE~="Test"][CLASS="three"]	{ background-color: aqua; }
*[lang=es]	{ color: red; background-color: green; }

Note: Any effects that are not described should not occur!

This should be black

This should be aqua

This should be blue and sans-serif

This should be green and sans-serif

This should be green

Tiuj vortoj devas esti normalaj (?).

This sentence should be purple and sans-serif.

This sentence should be purple and capitalized.

This sentence should be purple.

This should be green.

This blockquote should be the default color. - David Baron

This division should be red with a yellow background.

This division should be blue with a yellow background.

This division should be maroon with a yellow background.

This division should be entirely normal.

This division should have an aqua background.

This division should have a yellow background.

Estas palabras deben ser rojas, sobre un fondo verde. (The spanish text should be red, on a green background, as should this text.)

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org