Menu
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?
375
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.
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
