0

Possible Duplicate:
Is there a shortcut for setting !important on every property in a CSS file?

I have a unique problem. In css, !important overrides any element already declared - but let's say I want all styles to override any other mentioned stylesheet; well, normally I would put the override second on the html file like this:

<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="override.css">

But for some reason this isn't working. Specifically, what I am doing, is adding classes to append basic css styles. Like this:

<div class="no-border-right float-left no-margin-top"></div>

And in my CSS:

.no-border-right {
    border-right: 0px solid transparent;
}

.float-left {
    float: left;
}

.no-margin-top {
    margin-top: 0;
}

But, it's still not overriding. I would just add !important to every element, but the problem is, I've already structured the 14gb library. (I work on this only when I'm bored... hehe :P) So I was wondering how to add !important to every element. Like:

* {
    ...!important;
}

Maybe not even that... Any ideas?

Community
  • 1
  • 1
ModernDesigner
  • 7,539
  • 10
  • 34
  • 41

5 Answers5

2
sed -i 's/;$/ !important;/' override.css other.css css.css files.css

Just physically add them. Read the other answers as to why !important isn't really a great idea, but never let it be said we didn't give you enough rope to hang yourself by.

FrankieTheKneeMan
  • 6,645
  • 2
  • 26
  • 37
1

Probably your new selectors doesn't have enough priority over the ones you have on mystyle.css?

CSS/Training/Priority level of selector

CSS: Understanding the selector's priority / specificity

!important override these calculations, buts a hack that should be avoided if possible in favor of the standard way.

Community
  • 1
  • 1
DaneoShiga
  • 1,007
  • 8
  • 16
0

There is no easy way to add important to every element in a file. Having said that, !important is a really bad idea, and should only be used as a last resort since it breaks the natural ability to override styles in CSS. You need to understand CSS selector specificity which is why your styles aren't overwriting the ones in the previous file. It's likely that the styles in the first file are more specific.

Please show the contents for mystyle.css

Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
0

It's a bad idea... read the article I've linked to below.

Nonetheless, the answer is still no, there's no way to do this within the CSS. However, because of the order you're including your CSS files (in the HTML), override.css will take precedence over mystyle.css. Adding important to every declaration in a CSS file is a blatant misusage. Read this article by Chris Coyier for more details on when using it's appropriate to use versus when you shouldn't be using it at all.

jeremy
  • 9,965
  • 4
  • 39
  • 59
0

If you want to override the aforementioned or implemented styles, use a selector higher in the hierachy. Each time you get more specific, the CSS styles higher in the hierarchy are overridden.

For example:

HTML:
   <div class="container">
    <div class="old-style stale vintage">
      <div class="new-style override-old-style">
        <div class="no-border-right float-left no-margin-top">
        </div>
       </div>
    </div>   
   </div>

 CSS:
  .no-border-right{border-right: 0px solid transparent;}

  .new-style .float-left{float: left;}

  .old-style .no-margin-top{margin-top: 0;}

.new-style .float-left should override .no-border-right. And .old-style .no-margin-top should override both styles. If you try to use styles from the same level, like .no-border-right .float left, the styles on the same level will cancel out. The style must have a more detailed description as you move farther down in the style sheet. With the new selectors add the new styles that you would like to override. I learned this method through using !important in a stylesheet used by a team of developers working on the same site. It's not pretty.

If you must get more specific than classes, and you are changing a specific element, go ahead and use IDs. I know that most web developers look down upon it. But if handled with care and used sporatically, they can be of good use. Don't go crazy with them. They are good to use on personalization, modals, etc. Again, just handle with care.

Above all, make the !important override your last resort. Envision it as a panic button. Use only in case of a dire override emergency.

Paula C
  • 169
  • 1
  • 8