How to prevent CSS inheritance?

Question

I have a hierarchical navigation menu in the sidebar that uses nested lists (<ul> and <li> tags). I am using a pre-created theme that already has styles for list items, but I want to change the style for top-level items, but DO NOT apply it to sub-items. Is there an easy way to apply styles to a top-level element tag without these styles cascading to its children list items? I understand that I can explicitly add overriding styles to subheadings, but I would really like to avoid duplicating all of this style code if there is a simple way to just say “apply these styles to this class and DO NOT cascade them down to any elements of children”. Here is the html that I am using:

<ul id="sidebar"> <li class="top-level-nav"> <span>HEADING 1</span> <ul> <li>sub-heading A</li> <li>sub-heading B</li> </ul> </li> <li class="top-level-nav"> <span>HEADING 2</span> <ul> <li>sub-heading A</li> <li>sub-heading B</li> </ul> </li> </ul> 

So css has styles for "#sidebar ul" and "#barbar ul li", but I would like to add additional styles to "# sidebar.top-level-nav", which are NOT cascaded to subchildren. Is there a way to do this simply or do I need to rebuild all the styles, so the styles that were on "#sidebar ul" are now specific to certain classes.

Answer 1

There are no parent selectors yet (or Shaun Inman calls them qualified selectors ), so you have to apply styles to the elements of the child list to override the styles in the parent elements of the list.

Cascading is the whole point of cascading style sheets, hence the name.

Answer 2

You either use a child selector

So using

 #parent > child 

Only first-level children will do to apply styles. Unfortunately, IE6 does not support a child selector.

Otherwise you can use

 #parent child child 

To establish other specific styles for children who are more than one level below.

Answer 3

CSS3 inheritance has the all property . It works as follows:

 #sidebar ul li { all: initial; } 

Starting from 2016-12, all browsers, but IE / Edge and Opera Mini support this property.

Answer 4

You can use the * selector to change child styles to default

Example

 #parent { white-space: pre-wrap; } #parent * { white-space: initial; } 

Answer 5

An iframe wrapper makes parent css deprecated.

Answer 6

Short answer: No, it is impossible to prevent CSS inheritance. You can only redefine styles that are set by parents. See Specification:

Each element of an HTML document inherits all inherited properties from its parent, except for the root element ( html ), which does not have a parent. - W3C

In addition to overriding each inherited property. You can also use the initial keyword. color: initial; . It can also be used with all , for example. all: initial; which will reset all properties at once. Example:

 .container { color: blue; font-style: italic; } .initial { all: initial; } 

 <div class="container"> The quick brown <span class="initial">fox</span> jumps over the lazy dog </div> 

Supported browser tables, depending on whether I can use ...

• all (there is currently no support in both IE and Edge, others are good)
• initial (There is currently no support in IE, others are good)

---

In some cases, you may find this useful using direct children selector > . Example:

 .list > li { border: 1px solid red; color: blue; } 

 <ul class="list"> <li> <span>HEADING 1</span> <ul> <li>sub-heading A</li> <li>sub-heading B</li> </ul> </li> <li> <span>HEADING 2</span> <ul> <li>sub-heading A</li> <li>sub-heading B</li> </ul> </li> </ul> 

The border style applies only to direct <li> s children, since border is an inherited property. But the color of the text applies to all children, since color is an inherited property.

Consequently, the > selector will only be useful with non-inherited properties when it comes to preventing inheritance.

Answer 7

You can use something like jQuery to "disable" this behavior, although I hardly think it is a good solution, since you get the display logic in css and javascript. However, depending on your requirements, you may find jQuery css utils to make life easier for you than trying to hack css, especially if you are trying to make it work for IE6

Answer 8

For example, if you have two divs in an XHTML document.

 <div id='div1'> <p>hello, how are you?</p> <div id='div2'> <p>I am fine, thank you.</p> </div> </div> 

Then try this in CSS.

 #div1 > #div2 > p{ color: red; } 

only affects the paragraph div2.

 #div1 > p { color: red; } 

only affects the paragraph 'div1'.

Answer 9

You do not need a class reference for li s. Instead of CSS as

 li.top-level-nav { color:black; } 

You can write

 ul#sidebar > li { color:black; } 

This will apply the style only to li , which immediately descends from the ul sidebar.

Answer 10

just return their defaults to the "#sidebar ul li" selector