Question

I know it’s possible to specify multiple classes on an element in HTML:

<div class='one two'>Text</div>

It seems like classes are accessible from Javascript as a single string.

What happens when the classes are specified with conflicting properties? For instance

div.one {
  background-color: red; 
  color: blue;
}
div.two {
  background-color: green;
}

Will the result depend on the order the classes are specified in? For instance could I reasonably expect the div above to appear with blue text and a green background, because the two class becomes evaluated second, overwriting the background-color property?

Answer 1

Read about specificity:

• Simple explanation
• More in depth explanation

Short answer: if two selectors have the same specificity, the last one to be declared wins.