CSS error : Name of overqualified element should be removed

Question

Consider this css, which make all elements in form and with mask-amount class become bold:

form .mask-amount {
    font-weight: bold;
}

Of course the above will not change the font weight of mask-amount elements outside form.

This will not be bold <span class="mask-amount">123,456</span>
<form>
   This will be bold <span class="mask-amount">123,456</span>
</form>

Code At: http://jsfiddle.net/a9qt8jw7/

However when I review my css with Sonar, I get this error Name of overqualified element should be removed. The error described at https://github.com/CSSLint/csslint/wiki/Disallow-overqualified-elements In brief

Writing selectors such as li.active are unnecessary unless the element name causes the class to behave differently. In most cases, it's safe to remove the element name from the selector, both reducing the size of the CSS as well as improving the selector performance (doesn't have to match the element anymore).

I don't want the other elements with mask-amount class be bold and so I cannot simply remove the form from css selector.

I used this kind of selectors a lot. I want to know what is the best way to change my css and fix this error. (I can not change my htmls, this will be a HUGE task!!)

The rule seems to cover elements like form.mask-amount not form .mask-amount (notice the missing space in the first example). Are you sure it's triggered because of this exact css rule? Maybe it's targeting another css rule? — Wavemaster
Probably Sonar checks if there are any occurencies of .mask-amount outside your form. And perhaps in that particular page there are none (making the form useless in the scope of that page). But, since your CSS applies to other pages too, either teach Sonar about those pages, either use it more as a guide, not to the letter. The rule above is rock solid. No downsides. You worry too much. — tao