Is not it enough to use only . foo class to style div? Why mdn use style attribute with . foo class?

Question

.foo[style*="color: red"] {
color: firebrick !important;
}
<div class="foo" style="color: red;">
What color am I?
</div>

Ref::https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 1

NUR ISLAM but it changes color for every .foo class , right ? As i said the above only selects elements with inline style "color:red" and then overrides it to add firebrick color. Consider other class foo elements having different color other than red and we don't want to change their colors .

But this is just what i see , if you wanna argue and know about the intention behind it , maybe send them an email (if it is possible!)

and if you need an example of what i mean, i will code it for you!

Answer 2

Maybe to make it more clear to user that they are overriding only .foo class elements having inline style with attribute color set to red.

Answer 3

Abhay but
. foo{
color:firebrick ! important;
}
Does the same thing. So why I need to use style attribute?