Multiple CSS Classes: Properties Overlapping based on the order defined
Is there a rule in CSS that determines the cascading order when multiple classes are defined on an element? (class="one two" vs class="two one")
Right now, there seems to be no such effect.
Example: both divs are orange in color on Firefox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.one { border: 6px dashed green }
.two { border: 6px dashed orange }
</style>
</head>
<body>
<div class="one two">
hello world
</div>
<div class="two one">
hello world
</div>
Answer
It depends on which one is declared last in your stylesheet. For example,
.one { border: 6px dashed green }
.two { border: 6px dashed orange }
vs
.two { border: 6px dashed green }
.one { border: 6px dashed orange }