How to use !Important in css?

[attosoft]

Hello, I'm still struggling a few good days to block a widget you want to give the scroll to page ultimu widgets remain stuck at the top, I realized that is used! Important but just do not get along. I use wordpress and last widget is made ​​by me, but rather a div that I want to apply this.

[Paul O'B]

Hello, I'm still struggling a few good days to block a widget you want to give the scroll to page ultimu widgets remain stuck at the top, I realized that is used! Important but just do not get along. I use wordpress and last widget is made ​​by me, but rather a div that I want to apply this.

Hi,

If you have an element that is using !important then to over-ride it you will also need to use !important and have at least the same weight (but later in the cascade) or more weight added to your rule.


e.g.

If this is the original rule.

#widget .test {background:red!important}

Then you would need to say:

#widget .test {background:blue!important}

But your code must follow after the original code.

If perhaps the widget css is being added dynamically and out of your control then you will need to make your rule more specific so add more weight to it.

e.g.

body #widget .test {background:red!important}

You can read up on specificity here.

[dresden_phoenix]

I use wordpress and last widget is made ​​by me, but rather a div that I want to apply this.

in addition to what Paul said, keep in mind the way WP adds widgets. If your widget areas are set up as LIs, perhaps your stile sheet targets the default widgets by targeting the UL .

Something like .widgets>li {attribute:value !important; } or li.widget {attribute:value !important; } in which case if you used a div to contain your widget you will miss the style completely.

Just something else to look for, I hope it helps

[virgilorlando]

!important is used when you want to overwrite the rule with high specificity but do not have sufficient evidence to tie.
Example of a site with this structure:

body> # content1> # page> # left-side> # sidebar>. widgets

and another page structure

body> # content1> # post> # sidebar>. widgets

To make a general CSS. Widgets should have something like:

# content1 body. widgets properties {a}

But if you have already defined properties in the first rule and rule you apply for your element, usually defined body # content1. Widgets is ignored because the second rule is more specific.