Using multiple classes in one element and specificity

Question

Just wondering when you use multiple classes on the one element such as class="foo bar" and those classes are setup as below:

.foo {     margin-right: 10px; }   .bar {     margin-right: 0px; } 

Which class will have specificity? Will the margin be 10px or 0px?

Answer 1

It works based on precedence within the CSS. Therefore the item to occur most recently will override any previous styles.

CASE 1

.foo  { background : red; } .bar  { background : blue; } 

class = 'foo bar' would be blue in this instance.

CASE 2

.bar  { background : blue; } .foo  { background : red; }  

class = 'foo bar' would be red in this instance.

Working Example