Make Entire CSS Sheet !Important

How to make CSS file more important than another CSS file?

There is no such magic. CSS has its own principles, such as the cascade, and you cannot switch them off.

You can place the reference to css.css after the reference to bootstrap.min.css, but this is just one factor in the process of resolving how CSS rules will be applied. Adding !important, which is generally a symptom of wrong design, is just yet another factor: an !important rule in an earlier file may override your !important rule, if its selector has higher specificity.

To override CSS rules, you need to analyze the rule you wish to override and set up a rule that “wins”, by the cascade principles.

Make entire CSS sheet !important

Make sure the stylesheet you want is called last (or a specific style you want is called last). For example, using this:

span { color: red; }
span { color: blue; }

...will turn all text in <span>'s blue. Take a look here.

Make !important the whole .class selector

No, it's not possible. !important is thought to be an instrument of last resort and as such should be used sparingly. !importanting whole selectors would caricature that idea.

If you need to trump other styles, use CSS specificity to your advantage. You can use, e.g., these techniques to push your style declarations to the top:

• double class name will trump single class name:

  .custom-selector.custom-selector > .custom-selector

• ID trumps class:

  #custom-id > .custom-class

• IDs can be duplicated, too:

  #id#id > #id

• inline styles trump any stylesheets:

  <style>
  p#id#id.class.class { color: green; }
  </style>
  <p id="id" class="class" style="color:red">I am red!</p>
  

How to add !important to every element in a CSS file

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.

Can one CSS file take priority over another CSS file?

It depends on how you set them in your header. So something like this will work:

<link rel="old stylesheet" href="path/to/style.css" />
<link rel="newer stylesheet" href="path/to/style.css" />
<link rel="newest stylesheet" href="path/to/style.css" />

The last one will be picked up.

And an helpful link about stylesheets here:
http://www.w3.org/TR/html401/present/styles.html#h-14.3.2

See also: Precedence in CSS if the above doesn't work for you.

Hope it is clear.

How to override !important?

Overriding the !important modifier

1. Simply add another CSS rule with !important, and give the selector a higher specificity (adding an additional tag, id or class to the selector)
2. add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).

Some examples with a higher specificity (first is highest/overrides, third is lowest):

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

Or add the same selector after the existing one:

td {height: 50px !important;}

Disclaimer:

It's almost never a good idea to use !important. This is bad engineering by the creators of the WordPress template. In viral fashion, it forces users of the template to add their own !important modifiers to override it, and it limits the options for overriding it via JavaScript.

But, it's useful to know how to override it, if you sometimes have to.

More important than !important (a higher level !important)?

No, there is no keyword or other way to make a declaration more important than !important. There is no known activity to change this.

In general, it is possible to override a declaration that has !important by using a rule that also has it and that has higher specificity. However, a declaration in a style attribute has, by definition, higher specificity than any other author declaration. The only way to defeat it is in CSS is to use a user style sheet with !important.

There are non-CSS solutions, but they are rather obvious, such as using JavaScript to simply remove or modify the style attribute.

Can you !important a whole css file?

You can't. !important is set on a per property basis (and its enough of a sledgehammer that it is best avoided there, let alone globally).

Write your selectors so they are more specific.

---

Related Topics