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