'How to break CSS inheritance?

I have created a web widget. That my client put in their websites. Basically on load it calls webservice and loads data specific to client.

As a result it looks like:

<div class="widget">
   <div class="container">
   </div>
</div>

Dynamically I apply CSS styles to my widget class. To look consistent with our corporate styling.

The problem is when client application styles overwrite the style I applied run time.

For example if client has, it overwrites my styles:

body {
  margin: 0 auto;
  padding: 0;
  width: 90%;
  font: 70%/1.4 Verdana, Georgia, Times, "Times New Roman";
}

Is there any way to break inheritance? Just to say whatever div with class widget styles has do not inherit parent styles.

css


Solution 1:[1]

I don't think you can break CSS inheritance per se, but you can try to circumvent it by following the rules of CSS specificity. Here's a good article about Specificity.

As a last resort, try adding !important to styles in the widget to give it a higher specificity than the default styles.

#myWidget{
    font: 100%/1 "Times New Roman", Serif !important;
}

If the client is also using !important it could cause problems. If you could setup a jsFiddle with an example, we could help find the issue.

Note, going the route of adding !important should be a last resort as it's the 'nuclear option' of style specificity.

Solution 2:[2]

You can not force elements to NOT inherit parent styles.

You can however override all possible styles that you do not want changed. If your CSS specificity is higher than the customers specificity then your styles will be dominate/expressed on the page.

See:

CSS Specificity via css-tricks.com

Per your example using the code below would be more specific than the body declaration and thus override :

.widget .container {
    font-family: Arial;
}

Solution 3:[3]

You can't break style inheritance as such, but you can ensure that your styles are either more important or loaded in the right order so yours comes out on top.

Have a look at the !important tag.

Alternatively if you load your stylesheets after theirs yours will take precedent (unless theirs is inline). You can use Javascript to load your styles after the body has loaded (But then you'd get a "flicker" effect).

Solution 4:[4]

You could also try inline styling. Inline styling has the highest priority. This will work if client overrides use an imported stylesheet.

Like others have mentioned, another option is !important.

You can also read up the relevant specs at http://www.w3.org/TR/CSS2/cascade.html where they describe exactly how they cascade. If above mentioned tricks don't work, perhaps specs will give you a clue or you will know for certain that this is not possible.

Solution 5:[5]

Use of the !important css attribute is considered a bad practice. Because it introduces the potential for precedence conflicts, and makes it extremely difficult to troubleshoot css in the long run.

A less intrusive approach to this problem is to delimit your widget with an id, and in your stylesheet, to reset some of the most important style declarations using the "universal" selector, such as:

#myWidget *{
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

For example. Then, define your overrides specifically.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 TankorSmash
Solution 2 PJH
Solution 3 John Mitchell
Solution 4 Nasir
Solution 5 Mauro Colella

Related Questions