CSS !Important Does Not Override Styles from External Stylesheets

CSS !important does not override styles from external stylesheets

This has nothing to do with CSS specificity or !important. You have a rule in main.css that says:

#legend .label {
  color: black;
}

The selector is targeting the .label elements directly and giving them a color, which prevents them from inheriting the color from the body or some other ancestor. An !important property applies only to the element that is targeted; it does not force other elements to inherit that property. In other words, a specified rule always takes precedence over an inherited rule, even if that inherited rule is !important.

See the spec:

User agents must first assign a specified value to each property based on the following mechanisms (in order of precedence):

1. If the cascade results in a value, use it.
2. Otherwise, if the property is inherited and the element is not the root of the document tree, use the computed value of the parent element.
3. Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition.

— http://www.w3.org/TR/CSS21/cascade.html#specified-value

CSS: !important not overriding other rules

Try this:

.navbar .navbar-nav>li>a {
    color: red;
}

How to override external css marked as !important?

I'm assuming you can't simply change the external CSS file.

This sort of thing is horrible to deal with and you should write the owner of that CSS file a condescending letter. Once you're done with that, you have to win the specificity battle. CSS selectors apply according to which one is the most specific. When !important is used, it means, "screw the specificity of anything else, use me."

However, when two selectors that target the same element both have a property with !important, the specificity kicks back in again (fun huh). Now this sort of war is best avoided (hence the letter and ideally slashing off important from the offending file), but you can do something like the below in your style sheet, which is a more specific selector than just the body tag AND has !important.

html body { font-size:9px !important;}

or

* body { font-size:9px !important;}

This sort of war is like nuking the body tag from space, so beware the collateral damage of this.

EDIT: Oh by the way inline styles beat out external stylesheets and inline blocks, such as your style attribute, and therefore would work yes, but if you're working on a site with more than one page that technique is obviously painful to maintain. The above approach will allow you to keep the override in an external stylesheet. Cheers.

Does embedded css always override external css?

It doesn't matter if your stylesheet is within <style>-tags or externally and linked with <link />. The last one has always precedence, they could even be in the same external file, really just the order of the selectors and their specificities matter.

However, inline CSS using the style=".." attribute always has precedence, because it's most specific. To override that, you would have to use !important. Properties in style=".." using !important cannot be overridden.

External CSS !important overriding inline !important

You have apparently confused inline style origin that originates from physical HTML attribute (<el style="[css declarations]">) with in-page style sheet that has "author" level origin specificity and originates either from <style>[css rules]</style> or <link rel="stylesheet" href="[css file url]">.

Style and link elements in page are origin-wise equal, attribute is more origin-wise specific.

It is not possible to beat !important rules from inline origin level (attribute) with !important rule from author level origin.

Overriding CSS inline with css file using !important does not work

I would erase the [style] and add the div to give it even more specifity, like:

div.selector.selectorarrow.selectorarrowleft {
  position: relative !important;
  top: 10px !important;
}

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.

---

Related Topics