How do I prevent CSS inheritance

Question

I have a hierarchical navigation menu in my sidebar that uses nested lists   lt ul gt  and  lt li gt  tags   I am using a pre-made theme that already has styles for list items  but I want to alter the style for the top-level items but NOT have it apply to the sub-items  Is there an easy way to apply styles to the top-level list item tag WITHOUT having those styles cascade down to its children list items  I understand that I can explicitly add overriding styles to the sub-items but I d really like to avoid having to duplicate all of that style code if there is an easy way to just say  apply these styles to this class and DO NOT cascade them down to any children elements   Here is the html I m using    lt ul id  sidebar  gt     lt li class  top-level-nav  gt       lt span gt HEADING 1 lt  span gt       lt ul gt         lt li gt sub-heading A lt  li gt         lt li gt sub-heading B lt  li gt       lt  ul gt     lt  li gt     lt li class  top-level-nav  gt       lt span gt HEADING 2 lt  span gt       lt ul gt         lt li gt sub-heading A lt  li gt         lt li gt sub-heading B lt  li gt       lt  ul gt     lt  li gt   lt  ul gt    So the CSS has styles for  sidebar ul and  sidebar ul li already  but I d like to add additional styles to  sidebar  top-level-nav that do NOT cascade down to its sub-children  Is there any way to do this simply or do I need to rearrange all of the styles so the styles that were on  sidebar ul are now specific to certain classes

User · Accepted Answer

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.

User · Answer

You either use the child selector  So using   parent  gt  child   Will make only the first level children to have the styles applied  Unfortunately IE6 doesn t support the child selector   Otherwise you can use    parent child child   To set another specific styles to children that are more than one level below

User · Answer

just set them back to their defaults in the   sidebar ul li  selector

User · Answer

You could use something like jQuery to  disable  this behaviour  though I hardly think it s a good solution as you get display logic in css  amp  javascript   Still  depending upon your requirements you might find jQuery s css utils make life easier for you than trying hacky css  especially if you re trying to make it work for IE6

User · Answer

You don t need the class reference for the lis  Instead of having CSS like  li top-level-nav   color black      you can write  ul sidebar  gt  li   color black      This will apply the styling only to lis that immediately descend from the sidebar ul

User · Answer

There is a property called all in the CSS3 inheritance module  It works like this    sidebar ul li     all  initial      As of 2016-12  all browsers but IE Edge and Opera Mini support this property

User · Answer

Short answer is  No  it s not possible to prevent CSS inheritance  You can only override the styles that are set on the parents  See the spec      Every element in an HTML document will inherit all inheritable properties from its parent except the root element  html   which doesn   t have a parent  -W3C   Apart from overriding every single inherited property  You can also use initial keyword  e g  color  initial   It also can be used together with all  e g  all  initial   that will reset all properties at once   Example    x000D   x000D   container   x000D    color  blue  x000D    font-style  italic  x000D    x000D   initial   x000D    all  initial  x000D    x000D   lt div class  container  gt  x000D    The quick brown  lt span class  initial  gt fox lt  span gt  jumps over the lazy dog x000D   lt  div gt  x000D   x000D   x000D    Browser support tables according to Can I use      all  Currently no support in both IE and Edge  others are good  initial  Currently no support in IE  others are good      You may find it useful by using direct children selector  gt  in some cases  Example    x000D   x000D   list  gt  li   x000D    border  1px solid red  x000D    color  blue  x000D    x000D   lt ul class  list  gt  x000D     lt li gt  x000D       lt span gt HEADING 1 lt  span gt  x000D       lt ul gt  x000D         lt li gt sub-heading A lt  li gt  x000D         lt li gt sub-heading B lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt span gt HEADING 2 lt  span gt  x000D       lt ul gt  x000D         lt li gt sub-heading A lt  li gt  x000D         lt li gt sub-heading B lt  li gt  x000D       lt  ul gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    The border style has been applied only to the direct children  lt li gt s  as border is an non-inherited property  But text color has been applied to all the children  as color is an inherited property   Therefore   gt  selector would be only useful with non-inherited properties  when it comes to preventing inheritance

User · Answer

For example if you have two div in XHTML document    lt div id  div1  gt       lt p gt hello  how are you  lt  p gt       lt div id  div2  gt           lt p gt I am fine  thank you  lt  p gt       lt  div gt   lt  div gt    Then try this in CSS    div1  gt   div2  gt  p      color  red      affect only  div2  paragraph    div1  gt  p       color  red       affect only  div1  paragraph

User · Answer

Wrapping with iframe makes parent css obsolete

User · Answer

You can use the   selector to change the child styles back to the default  example   parent       white-space  pre-wrap      parent         white-space  initial

[css] How do I prevent CSS inheritance?

Examples related to css