Brett Brett - 1 year ago 69
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 Source

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


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

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


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

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

Working Example

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download