Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS order rules question

Tags:

css

Why the following code results in red color rather than black ?

HTML:

<div class="error classA" att="A"></div>

CSS:

div {
    width: 100px;
    height: 100px;
}

[att=A].classA {
    background-color: red;
}

.error {
    background-color: black;
}

If I remove [att=A], it becomes black, as expected. Why is that ?

like image 269
Misha Moroshko Avatar asked Dec 13 '22 21:12

Misha Moroshko


1 Answers

It's because of CSS Specificity. The 'red' rule is more specific (elements which have this attribute AND this class) than the 'black' rule (elements which have this class). When you remove the [att=A], they have the same specificity, but because the black rule is later in the file, it wins.

like image 177
nickf Avatar answered Jan 08 '23 17:01

nickf