SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to use !Important in css?

    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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by attosoft View Post
    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.

    Code:
    #widget .test {background:red!important}
    Then you would need to say:
    Code:
    #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.
    Code:
    body #widget .test {background:red!important}
    You can read up on specificity here.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,823
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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

  4. #4
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    !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:

    Code:
    body> # content1> # page> # left-side> # sidebar>. widgets
    and another page structure

    Code:
    body> # content1> # post> # sidebar>. widgets
    To make a general CSS. Widgets should have something like:

    Code:
    # 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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •