Can an entire CSS ".class" have its specificity as '!important'? [closed]

Question

I am working heavily in jQuery UI widgets and theming is becoming hard because of an oversight that I need to work around.

Consider this problem:

<div id="node" class="ui-widget">
    <div class="ui-widget-content">
    </div>
</div>

Then this jQuery code:

<script>
    $(function() {
        $('#node').hover(function (){
            $(this).toggleClass("ui-state-error");
        });
    });
</script>

I would like the ui-state-error to be !important to the nested div. This is pseudocode, but I find large examples of this happening where containers have CSS swaps and children (basically) ignore it.

What is even worse is this: if I would like to be able to overwrite in jQuery, say, "backgroundcolor=ui-state-error:background-color knowing 100% it all won't go to pieces, because I don't "know" necessarily that that background is the important one for the element in question.

Here is a fiddle of a case in point: http://jsfiddle.net/WCuYH/1/

Piezoelectricity

No, the only way to make a whole HTML class !important is to add the !important declaration after each property setting in the CSS. What was the oversight? – Hembree

You should probably read up on CSS specificity, and how that works, before trying to apply !important to whole class. – Abreast

It's also worth noting that !important should be used very sparingly. Usually the only people using it are browser vendors, like Mozilla. – Guppy

Rules that are defined later than others are "prioritized" (overrides previous rules). Eg: if you have a:hover before a, the properties in a:hover that are also specified in a will not apply, because the rules in a overrides the rules in a:hover. – Crush

I am confused, how does a mixture talking about the role of !important and it's pro's and cons' begin to offer a answer to this problem - @Kevin !important is clearly not included in the class level of specificity just the style therin (so I would consider that a oversight feature) since specificity is not fully mature yet (i.e no negation, no exposing of the applied style in situ, no specificity cascade opt-out or controls etc etc) – Piezoelectricity

!important has absolutely nothing to do with specificity anyway. – Osorio

!important is great for one command classes like 'float-left', 'no-margin'. If your project uses one command classes that is – Scrubby

Answer 1

First off !important applies to one specific declaration in a CSS rule. It doesn't apply to a class. So, "no" you can't make a class !important.

Second off, !important is just one part of CSS specificity. You can also use other ways to make a rule be a more specific rule to have precedence (such as referring to an id in the parent chain instead of just the class. When I'm writing CSS, using !important is my last possible choice - I'd much rather solve overrides with other specificity solutions. Usually, if you control all the CSS, this is pretty easy to avoid using !important. If you have to override some CSS that you don't control, then sometimes it is handy.

If your jQuery code is going to toggle a class on the object, then you will have to craft your CSS rules so that adding/removing this class causes the right CSS declarations to have precedence. For us to help you further with that part, you would need to show us the relevant parts of both your HTML and CSS so we could advise on how to solve your precedence/specificity problem.

Cryotherapy

!important applies to one CSS declaration, not rule. E.g., in a { color: blue; background: white !important }, only the declaration for background is made important; the other declaration in the same rule is not affected. – Parse

I am trying to apply something that will result in all hover effects making the child div have the "blue" background (in this jQuery UI theme it's blue) on hover it relates to line 235 in the jQueryUIGrid addon I am making jsfiddle.net/WCuYH – Piezoelectricity

sorry it's jsfiddle.net/WCuYH/1 rows 2 and 4 (index 1,3) are correctly hovering blue on mouse over of rows. The rows 1 and 3 (index 0,2) are failing to do this because the child style overwrites it – Piezoelectricity

@JukkaK.Korpela - What you said is what I meant. I tweaked the words to be more clear. – Cryotherapy

@Juan I don't agree - I think it's a blunt switch of enforced positivity in an area there should be full 360 degree 3rd dimensional control (EG: where is !unimportant or remove in the declaration switches of properties in the inline styling (or for EG: where is!importance-asif-inline-status) that sort of thing – Piezoelectricity

@MacLovin: Too bad that's not how CSS works. – Osorio

@Juan Mendes Thinking !important is useless is for people who don't understand CSS specificity. – Scrubby

I completely agree with MacLovin that this is an issue that hopefully could be resolved in future. In an ideal world !important would not be declaration specific but an option to also apply it to an entire class, I agree this is needed. @Juan Mendes - Your input was unnecessary and insulting. – Oglesby

@JoeCorby Sorry for the insult, I could have said it more nicely. However, I still stand by the premise that !important is a hack and should only be used as a last resort when overriding CSS code you don't have control over. When you use !important, you lose the ability to override that style, which is at the core of CSS – Worrywart

@JuanMendes I agree entirely that it is essentially a last resort hack and should be avoided if your able too. I just feel that expanding it to a wider use such as whole classes would be useful. But as you mentioned, still a last resort. – Oglesby

@JuanMendes if you think !important can't be overwritten, oh boy! You should see sharepoint's masterpages! It overwrites any styles! :D – Eirene

@Eirene It's not that it can't be overridden, they can only be overridden by other !important rules coming after it in the HTML. – Worrywart

I know, I'm just poking sharepoint. Also, these rules can be cleared with Javascript and injector functions, if it's server side HTML control. – Eirene