Brett Brett - 2 months ago 8
CSS Question

Using multiple classes in one element and specificity

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

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