22

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/

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
MacLovin
  • 237
  • 1
  • 2
  • 6
  • 2
    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? – Kevin Boucher May 11 '13 at 20:58
  • 3
    You should probably read up on [CSS specificity](http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/), and how that works, before trying to apply !important to whole class. – adeneo May 11 '13 at 21:08
  • 2
    It's also worth noting that !important should be used **very** sparingly. Usually the only people using it are browser vendors, like Mozilla. – mlissner May 11 '13 at 21:12
  • 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`. – MiniGod May 11 '13 at 21:20
  • 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) – MacLovin May 11 '13 at 21:42
  • 1
    `!important` has absolutely nothing to do with specificity anyway. – BoltClock May 12 '13 at 14:25
  • !important is great for one command classes like 'float-left', 'no-margin'. If your project uses one command classes that is – Ian Steffy Apr 23 '14 at 20:20

1 Answers1

17

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.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • `!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. – Jukka K. Korpela May 11 '13 at 22:09
  • 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 http://jsfiddle.net/WCuYH/ – MacLovin May 11 '13 at 22:19
  • sorry it's http://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 – MacLovin May 11 '13 at 22:20
  • @JukkaK.Korpela - What you said is what I meant. I tweaked the words to be more clear. – jfriend00 May 11 '13 at 22:55
  • 2
    @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 – MacLovin May 12 '13 at 12:31
  • @MacLovin: Too bad that's not how CSS works. – BoltClock May 12 '13 at 14:24
  • 4
    @Juan Mendes Thinking !important is useless is for people who don't understand CSS specificity. – Ian Steffy Apr 23 '14 at 20:22
  • 1
    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. – Joe Corby Dec 02 '14 at 15:34
  • @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 – Ruan Mendes Dec 02 '14 at 15:41
  • @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. – Joe Corby Dec 03 '14 at 09:35
  • @JuanMendes if you think !important can't be overwritten, oh boy! You should see sharepoint's masterpages! It overwrites any styles! :D – Malavos Jul 29 '15 at 13:13
  • @Malavos It's not that it can't be overridden, they can only be overridden by other `!important` rules coming after it in the HTML. – Ruan Mendes Jul 29 '15 at 13:27
  • 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. – Malavos Jul 29 '15 at 13:29