How to break CSS inheritance?

Question

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.

You may want to try the !important tag on each piece of your CSS. It will overwrite anything that is not important. — ntgCleaner
– ntgCleaner, Commented Aug 7, 2012 at 17:04

TankorSmash · Accepted Answer · 2022-04-01 16:42:27Z

10

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.

edited Apr 1, 2022 at 16:42

TankorSmash

12.9k6 gold badges71 silver badges108 bronze badges

answered Aug 7, 2012 at 17:03

jmbertucci

8,2544 gold badges52 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

German Over a year ago

I tried to add the important tag to my styles, but still client styles have precedence over mine.

jmbertucci Over a year ago

This could still come down to specificity issues. I'll update my answer a bit with more explanation. But I would recommend giving that article a quick read. It will help you calculate your CSS files specificity and make it higher than the client's styles.

PJH · Accepted Answer · 2012-08-07 17:08:48Z

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;
}

answered Aug 7, 2012 at 17:08

PJH

4974 silver badges12 bronze badges

Comments

nyxthulhu · Accepted Answer · 2012-08-07 17:03:09Z

1

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).

answered Aug 7, 2012 at 17:03

nyxthulhu

9,8029 gold badges60 silver badges92 bronze badges

2 Comments

German Over a year ago

I tried to add tag important to my styles, but still client styles have precedence over mine.

nyxthulhu Over a year ago

If they are also using the important tag then your out of luck I'm afraid without using some JavaScript to remove their styles.

Nasir · Accepted Answer · 2012-08-07 17:10:40Z

1

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.

answered Aug 7, 2012 at 17:10

Nasir

2,98433 silver badges35 bronze badges

Comments

Mauro Colella · Accepted Answer · 2015-10-22 07:49:05Z

1

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.

answered Oct 22, 2015 at 7:49

Mauro Colella

5256 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to break CSS inheritance?

5 Answers 5

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related