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-ri         


        

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