CODEWITHSUNDEEP
css
injoy
injoy

Reputation: 4373

What's the real style when multiple CSS style classes are applied to the same element?

I have a html file as below:

<!DOCTYPE html>
<html>
    <head>
        <style>
        .social { color: red; border: 1px solid blue; display: inline-block;}
        .first { color: green; }
        </style>
    </head>
    <body>
        <p class="social">taco</p>
        <p class="first">burrito</p>
        <p class="first social">chimichanga</p>
    </body>
</html>

I uses classes 'first' and 'social' for the 3rd paragraph. However, the colour of the 3rd paragraph is always green ('first') no matter whether I put 'first' before 'social' or after.

So, how does the browser decide the css style when multiple style classes are applied to one element?

Upvotes: 4

Views: 37

Answers (2)

dmi3y
dmi3y

Reputation: 3522

It is green simply because class .first is the last in the order of css selectors which applied for this element. So if you swap them it will become red. (.social after .first)

The reference order in the class attribute does not make any effect.

Here is quite long and old but good read about how browsers works and especially how css computation works.

Upvotes: 3

timolawl
timolawl

Reputation: 5564

From the CSS2.1 specifications:

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins.

In your case, the first class appears after the social class in your internal stylesheet. Since both have the same weight, origin, and specificity, the first rule's overlapping style (i.e., color property) wins.

Upvotes: 4

Related Questions