Two and Three Classes CSS Test

The CSS applied here is the following:

P { color: black; }
.ybox { background-color: yellow; }
P.gbox { background-color: #9F9; }
.rbox { background-color: #F99; }
P.bbox { background-color: #AAF; }

P { border-style: none; border-width: 0; }
.wbord { border-width: medium; }
.sbord { border-style: solid; }

One Class

This paragraph should have a yellow background.

This paragraph should have a green background.

This paragraph should have a red background.

This paragraph should have a blue background.

Two Classes

This paragraph should have a green background because gbox is more specific.

This paragraph should have a green background because gbox is more specific.

This paragraph should have a green background because gbox is more specific.

This paragraph should have a green background because gbox is more specific.

This paragraph should have a blue background because bbox is more specific.

This paragraph should have a blue background because bbox is more specific.

This paragraph should have a blue background because bbox is more specific.

This paragraph should have a blue background because bbox is more specific.

This paragraph should have a red background because rbox is specified later in the stylesheet.

This paragraph should have a red background because rbox is specified later in the stylesheet.

This paragraph should have a blue background because bbox is specified later in the stylesheet.

This paragraph should have a blue background because bbox is specified later in the stylesheet.

Three Classes

This paragraph should have a green background because gbox is more specific.

This paragraph should have a green background because gbox is more specific.

This paragraph should have a green background because gbox is more specific.

This paragraph should have a green background because gbox is more specific.

This paragraph should have a green background because gbox is more specific.

This paragraph should have a green background because gbox is more specific.

This paragraph should have a blue background because bbox is more specific.

This paragraph should have a blue background because bbox is more specific.

This paragraph should have a blue background because bbox is more specific.

This paragraph should have a blue background because bbox is more specific.

This paragraph should have a blue background because bbox is more specific.

This paragraph should have a blue background because bbox is more specific.

This paragraph should have a blue background because bbox is more specific than rbox and comes later than gbox.

This paragraph should have a blue background because bbox is more specific than rbox and comes later than gbox.

This paragraph should have a blue background because bbox is more specific than rbox and comes later than gbox.

This paragraph should have a blue background because bbox is more specific than rbox and comes later than gbox.

This paragraph should have a blue background because bbox is more specific than rbox and comes later than gbox.

This paragraph should have a blue background because bbox is more specific than rbox and comes later than gbox.

This paragraph should have a blue background because bbox is more specific than ybox and comes later than gbox.

This paragraph should have a blue background because bbox is more specific than ybox and comes later than gbox.

This paragraph should have a blue background because bbox is more specific than ybox and comes later than gbox.

This paragraph should have a blue background because bbox is more specific than ybox and comes later than gbox.

This paragraph should have a blue background because bbox is more specific than ybox and comes later than gbox.

This paragraph should have a blue background because bbox is more specific than ybox and comes later than gbox.

Borders

This paragraph should not have a border because border-width is 0.

This paragraph should not have a border because border-style is none.

This paragraph should have a medium solid border.

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org