What's the opposite of '!important' in CSS?

I开发者_StackOverflow'm building a jQuery plugin that uses CSS styles to add colors and margins to nested DIV tags. Since I'd rather keep the plugin as a single file, my code adds these colors and margins directly as CSS attributes to the DIVs using jQuery's .css() method. (The values for these attributes can be customized when the plugin is initialized.)

However, I also wanted to give users the power to style these DIVs using their own stylesheets, so I'm also adding classes to each group of DIVs (for which the names can also be customized). This seemed like the best way to provide the best of both worlds.

The only drawback seems to be that inline style="..." attributes (generated by jQuery's .css() method) always override class styles set in the external stylesheet. I can, of course, use !important styles in the stylesheet, but doing this again and again is cumbersome.

So: what I really want is a way to make the inline styles automatically take a lower priority than the external class styles, without having to make the external class styles !important.

I have not read about such a thing. Any suggestions? (Or: is there another approach I should be taking to style my DIVs in the plugin?)

What's the opposite of !important in CSS?

There isn't an exact opposite, but there are lower precedence selectors.

w3c spec defines the cascade, might as well read it.

inline styles have highest precedence, and you're after a low-precedence style, you'll need to add CSS via a stylesheet or style element.

Because you're using jQuery, adding a custom style element is very easy:

$('<style type="text/css">.foo {color: #FF0000;}</style>').prependTo('head');

The issue you're then going to find is that a user who has specified .foo in a stylesheet will need a higher specificity to win out over the style element, so I'd recommend using an additional class for each element so that a user can override the defaults:

.foo.override { color: #0000FF; }

In all cases you're going to want to carefully pick your selectors to have the least specificity possible.

In general, if you are considering using !important, then there's a good chance you should be thinking about tidying up your stylesheets.

!important can be useful to force things to behave, but most of the time it is an indicator of overly-complex CSS.

There isn't an opposite of !important (nor even the ability to assign levels of importance), but if there was, the same point would probably apply.

CSS rules are applied in a very strict order of precedence, and if you follow the best practices of how to apply your CSS (ie style element names and class names in preference to IDs and inline styles) then it is usually possible to override things as required without resorting to !important.

The only times I've found that I've actually needed !important have been where I've been working on a stylesheet which was layered on top of existing styles defined by a CMS template which I didn't have any control over.

In your case, you are setting inline styles using jQuery. This is a perfectly good thing to do if you want to achieve spot-effects. However for performing general styling, with the possibility of overriding it, you would be better off if you defined those styles in your CSS, and used jQuery to add or remove the classname in order to apply those styles.

This would enable you to apply the styles to groups of elements but still have overrides for them where required.

Hope that helps.

What you might do is prepend a new style to the head of the page and then call the style in your script.

Something like

$("<style type='text/css'> .theStyle{ //WHATEVER} </style>").prepend("head");

Then you can use addClass in your script

$("whatever").addClass("theStyle");

Because you are adding it as the first thing in the head, other stylesheets should override the styles.

So your users could add a .theStyle rule to one of their .css files and it should work.

EDIT

To clarify based on @zzzzBov's comment below

style is an internal stylesheet and the .css files I mentioned are external stylesheets

The external will only take precedence if the specificity is greater.

For this to happen, you need to continue to call your css in the script .theStyle and you need to have your users assign an element to that style, such as div.theStyle, which has greater specificity and will override the former.

BTW: @Spudley is right about !important.

You could always have a conditional statement to see if the CSS has already been set, and if it has, don't set it again with jQuery.

You can't do that.

Inline styles will always take precedence over styles in your stylesheet.

Using !important is the correct method for having your stylesheet styles take precedence over your inline styles.

This is not possible. I'd suggest an extra option in your plugin for turning the styles on or off and only add the css based on that option.

The way some plugins does it is supply a parameter that the developer can use to override the default class names. So that if they want to override your styles, they can supply maybe a prefix-parameter to make all classnames be prefix.yourdefaultclassname.