Question

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 ?

Answer 1

Because in CSS, specificity counts towards the “Cascade” too.

[att=A].classA targets an attribute and a class name.

.error only targets a class name

Because the first is more specific, it gets applied over top of the second.

If you want to forcefully override a previously applied style, you can use the !important declaration:

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

However, I should note, IE ignores the !important declarationhas buggy support for it, so use it with care.