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:
The most obvious way would be to remove the jumbotron css and write your own.
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
Html 5 Strange Img Always Adds 3Px Margin At Bottom
Single Huge .Css File Vs. Multiple Smaller Specific .Css Files
Background Color of Text in Svg
How to Make a Div Expand Vertically to Wrap the Content Within It
How to Combine :Nth-Child() or :Nth-Of-Type() With an Arbitrary Selector
Why Can't an Element With a Z-Index Value Cover Its Child
Footer At Bottom of Page or Content, Whichever Is Lower
Css Floating Divs At Variable Heights
How to Make an Element Fill the Remaining Viewport Height
Angular Material Mat-Drawer in Full Height Flex, Content Overflow Auto
How to Remove Border of Drop Down List:Css
How to Word-Wrap Long Words in a Div
Format Text in a ≪Textarea≫
Make Nested Div Stretch to 100% of Remaining Container Div Height
Change Button Border Color When the Button Is Being Clicked and After