Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    98
    Thanks
    24
    Thanked 0 Times in 0 Posts

    How to overwrite !important CSS value with a more !important statement?

    Assume I load a web page from an external server (which is not under my control) which contains a CSS with a !important statement for a lets say "file-size. attribute".

    Now I want to overwrite this CSS statement with my own value e.g. by using Greasemonkey AddOn in Firefox which adds new, additional CSS statements to the pool of existing CSS statements.

    This "normal" overwriting can be performed by appending an "!important" tag at the end.

    But what if the original CSS contains already an "!important" tag?

    How can I later/afterwards overwrite this with an even higher priority !important value?

    Peter

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,215
    Thanks
    6
    Thanked 1,347 Times in 1,316 Posts
    By using a selector with higher specificity.

    For example, if this is the selector:

    Code:
    .example .classname {property: value !important;}
    then use a selector (i. e. a class or ID) of an element that’s higher in the DOM hierarchy, e. g.:
    Code:
    .ancestorClass .example .classname {property: value !important;}

  3. #3
    New Coder
    Join Date
    Dec 2011
    Posts
    98
    Thanks
    24
    Thanked 0 Times in 0 Posts
    Ok, "higher in DOM hierarchy" means element class/id nested INSIDE the current selector element?
    Correct?

    Hmm, what if the current selector refers already to the topmost possible element?

  4. #4
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,273
    Thanks
    4
    Thanked 476 Times in 464 Posts
    Quote Originally Posted by pstein View Post
    Hmm, what if the current selector refers already to the topmost possible element?
    Technically that would be "html" -- you rarely see anyone target "html" on site apart from setting height:100% so that body can height/min-height.

    It's a good trick if you're using client-side CSS for overrides, such as with stylus. "html" is a valid CSS element target, it's the parent of everything... so if you know that:

    Code:
    #test .something { font-size:16px !important; }
    You can just

    Code:
    html #test .something { font-size:1em !important; }
    ... and it SHOULD take, though in actuality you shouldn't have to do that, user.css such as applied with stylus will apply it's values over any equal level declaration, even with !important.

    Code:
    div { color:red !important; }
    div { color:blue !important; }
    Even in the same stylesheet will give you blue. Any post-load user.css being loaded after will override an equal depth !important.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

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