What is the difference between multiple class properties and the single class list with multiple classes?

advertisements

In CSS styles, when two classes with same weight, the later declared one will overwrite the previous one, just as following code

<html>
<head>
<style type="text/css">
h1.first  {color:blue;}
h1.second {color:cyan;}
</style>
</head>

<body>
<h1 class="first second">The heading text</h1>
</body>
</html>

switching 'first' and 'second' will not impact the final 'cyan' color. While when I try to split the class list into multiple classes, seems the order will impact the final result, for example, when using

<h1 class="first" class="second">The heading text</h1>

The final color is 'blue', when using

<h1 class="second" class="first">The heading text</h1>

The final color is 'cyan'

Could anyone give a more detail description about the difference? It seems if I split class list, only the first class attribute will work? seems the split one will not merge into one single class list. Thanks.


The element can only have one class attribute. So when you add two, the second one is ignored, which is why you get that behaviour.

Note: The fact that the second one is ignored is a browser specific implementation. I'm not aware of browsers that do it differently, but basically the document is invalid and browsers can 'solve' this any way they want.

The HTML Syntax says that multiple attributes with the same name should never exist on the same element, but it doesn't say how to solve this, so that's up to the browser vendors.