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

A single class name carries the same weight. In such a scenario, the rule that is listed first will be overwritten by the second, and hence, the element will have margin-right: 0px;

Here is a simple example using color instead of margin, because it's easier to visualize. The value specified in bar will be chosen by the browser.