Search code examples
csscss-specificity

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?

Solution

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

    CASE 1

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

    class = 'red blue' would be blue in this instance.

    CASE 2

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

    class = 'blue red' would be red in this instance.

    Working Example