I have a code which is working normal when used separately.

<div class="red green blue"> </div> 

Now properties of red are applied first then overwritten by green then by blue. Finally, the div is blue.

But, when I load the same content in main application referring the HTML files by means of angular include, the order of CSS get reversed.

Now blue get applied first overwritten by green then by red. Now the div is red

This is breaking the code logic.

What is the possible reason if anyone has an idea.

I have a code which is working normal when used separately.

<div class="red green blue"> </div> 

Now properties of red are applied first then overwritten by green then by blue. Finally, the div is blue.

But, when I load the same content in main application referring the HTML files by means of angular include, the order of CSS get reversed.

Now blue get applied first overwritten by green then by red. Now the div is red

This is breaking the code logic.

What is the possible reason if anyone has an idea.

• javascript
• html
• css
• angularjs

• If you're not using an attribute selector like div[class="class1 class2 class3"] the order of the classes in the element doesn't matter. – Andreas Commented Mar 2, 2017 at 6:49
• 3 Please update your question with a runnable minimal reproducible example using Stack Snippets (the [<>] toolbar button) demonstrating the problem, as CSS doesn't work the way described above, so something else is going on. – T.J. Crowder Commented Mar 2, 2017 at 6:52

1 Answer 1

Now properties of red are applied first then overridden by green then by blue

That's not how CSS works. The order of the classes in the class list has nothing whatsoever to do with the precedence of the rules those classes apply to the element.

CSS rules are applied by

• The specificity of the rule
• The order of the rule in the CSS (not the class list) relative to other rules with the same specificity (e.g., later rules win)
• Whether the rule has an !important flag

More in the specification.

Example:

.red {
  color: red;
}
.green {
  color: green;
}
.blue {
  color: blue;
}

<div class="red green blue">red green blue</div>
<div class="blue green red">blue green red</div>

Note that both divs have blue text (the color specified by blue), even though the first has red green blue and the second has blue green red, because all three rules have the same specificity, the .blue rule is the last rule in the CSS, and none of them is marked !important.

In contrast, let's make the .green rule more specific:

.red {
  color: red;
}
div.green {
  color: green;
}
.blue {
  color: blue;
}

<div class="red green blue">red green blue</div>
<div class="blue green red">blue green red</div>

Notice how the divs are now green instead of blue, because div.green is more specific than .blue, so the div.green rule takes precedence over the .blue rule even though .blue is later in the CSS.