Double classes, double attributes

What happens if you have an HTML element that has TWO class attributes? For example, consider the following:

<div class="red" class="uppercase">Hello World!</div>

And let's define a couple styles:

.red {color: red;}
.uppercase {text-transform: uppercase;}

It turns out that only the FIRST class definition is respected by the browser; i.e. our example will be red, but NOT uppercase.

Testing

Using an online based tool (Litmus), I was quickly able to render my test page and verify this behavior in 11 browser versions, including IE6-9, FF 12, Chrome 18, Opera 11, Safari 5, and iPhone 4s. Below is a screenshot so you can (sort of) see.

Double Attributes

As a semi-related question, I thought it would be interesting to try targeting attributes instead of classes, so I tried this:

<div red uppercase>Hello World!</div>

And then changed my css to use (CSS2) attribute selectors:

.red, div[red] {color: red;}
.uppercase, div[uppercase] {text-transform: uppercase;}

And presto, my "Hello World!" becomes both red and uppercase. Interesting. Note that for this to be valid (only in HTML5 I believe), you'd want to add "data-" in front of each attribute, e.g. "data-red"; more info here: HTML5 Custom Attributes

Full demo with code