How to Prevent CSS Inheritance

How do I prevent CSS inheritance?

As of yet there are no parent selectors (or as Shaun Inman calls them, qualified selectors), so you will have to apply styles to the child list items to override the styles on the parent list items.

Cascading is sort of the whole point of Cascading Style Sheets, hence the name.

How to prevent css inheritance?

You selector is correct and its rule-set applies only to the immediate divs of the .parent element. The problem is with the color property, because color is an inherited property. So all elements inside .parent > div will have color: red, even if they are spans, sections etc.

An easy approach to deal with that is to set all divs with some color, and then add your selector. But as you can see in the example below all the elements inside our target div have their color as red, apart from the ones that we have set them elsewhere.

div {
color: black;
}

.parent > div {
color: red;
}
<div class="parent">
<div> DIV A
<div> DIV B </div>
<span> SPAN </span>
</div>
</div>

how to prevent css inherit?

Use a selector that actually selects the elements you want. In this case >, the child selector, will suffice.

.main-content > span {
background: #921192;
color: white;
padding: 3px 4px;
margin: 0 5px;
}

http://jsfiddle.net/mattball/mQFz2/

Prevent CSS inheritance to children of the selected element

Some CSS properties are inherited and you can't prevent that.

Inheritance propagates property values from parent elements to their children.

Some properties are inherited properties, as defined in their
property definition table. This means that, unless the cascade results
in a value, the value will be determined by inheritance.

However, you can override that by selecting the children and restoring the desired value.

.wrapper > ul:first-child > li:last-child {  color: red;}.wrapper > ul:first-child > li:last-child > * {  color: initial;}
<div class="wrapper">  <ul>    <li>Lorem</li>    <li>Ipsum</li>    <li>Dolar</li>    <li>Style me!      <ul>        <li>Lorem</li>        <li>Don't style me!</li>      </ul>    </li>  </ul></div>

Cannot prevent css inheritance

It is because of specificity. The .Submenu class is overwritten by .Topmenu.update. To avoid this, put .Topmenu.update in front of the .Submenu class.

.Topmenu a {  color: black;}
.Topmenu.update a { color: blue;}
.Topmenu.update .Submenu a { color: black;}
<div id='Mainmenu'>  <ul>    <li class='Topmenu update'><a href='Link1'>Link1</a>      <ul>        <li class='Submenu'><a href='Link2'>Link2</a></li>      </ul>    </li>  </ul></div>

How to prevent inheritance of any css style of parent node to child node?

There is no generic way. You need to set a value (other than inherit) for every property that has inherit as the default value.

Even that won't prevent all influence.

e.g.

 body { width: 300px; }
div { width: auto; }

The width of the div is influenced by the width of the body.

Prevent CSS Inheritance

CSS isn't inheritance-based, but rather "cascading" (it's the first C in "CSS"). Understanding that, there are a few ways you could work around the issue you describe:

1) Add inline styles to your element via script. Inline styles take precedence over CSS rules, either from classes, ids, or elements.

2) Add your own CSS file programmatically. CSS cascades in the order the rule appears in the document. You can write a CSS link element to the bottom of the page to include your plugin's CSS rules. Since these are presumably lower or "later" in the document than the site's CSS, your rules will take precedence.

3) Write a style tag to the bottom of the document programmatically. Same concept here as #2, but without an external file.

I would personally tend toward #1. If you want your plugin to be consistent in appearance no matter what else is going on, no matter what site it is used on, the only way to be sure is to apply your styles inline.

That said, there's value in making your plugin's interface customizable by using CSS classes. Maybe you're trying to take something away that you shouldn't. For instance, if the entire site uses a Serif font, and you're forcing a Sans font on your plugin's UI, your plugin's look and feel is now at odds with the site. That could be a deal-breaker when someone is considering your plugin... customization is a good thing in the world of reusable code, and CSS is the way to make it happen.

How to not inherit CSS styles from parents?

Some ways to work with or prevent CSS inheritance:

  1. The most obvious way would be to remove the jumbotron css and write your own.

  2. Secondly, you could try to change the CSS to be more specific. For example using advanced css selectors IE: .jumbotron > .childClass. Or stuff like + :not() :first-child :last-child (and others). Depends on your use case. See advanced selectors.

Or if you don't want to modify or change the CSS of the parent class. Then another option would be to override it with a higher parent. For example...

<div class="jumboTronParent">
<div class="container">
<div class="jumbotron">
<div class="myChildClass"></div>
</div>
</div>
</div>

.jumboTronParent .jumbotron > .myChildClass {
font-size:1em;
// applies font style to just first level children with this class
}

.jumboTronParent .jumbotron .myChildClass {
font-size:1em;
// applies font style to all children with class
}


Related Topics



Leave a reply



Submit