how to prevent css inherit

Question

Below are the sample code block i use  I have two set of css  and want to apply onto two UL component  however  the result come out  the inner  UL  will hold some of the css which defined for its parent  and even some of the css defined in  b  will be override by  a     nightmare     how can i stop the inheritance      lt ul class  moduleMenu-ul  gt         for loop begin             lt li class  moduleMenu-li  gt                     lt a gt  lt  a gt           lt  li gt         for loop end          lt li class  moduleMenu-li  gt             lt a gt On Over the div below will be show lt  a gt             lt div id  extraModuleMenuOptions  gt                   lt ul class  flow-ul  gt                     for loop begin                        lt li class  flow-li  gt                             lt a class  flow-a  gt  lt  a gt                       lt  li gt                     for loop end                    lt  ul gt             lt  div gt        lt  li gt   lt  ul   CSS    moduleMenu-ul       width  100       height  43px      background   FFF url     images module-menu-bg gif   top left repeat-x      font-weight  bold      list-style-type  none      margin  0      padding  0      moduleMenu-ul  moduleMenu-li       display  block      float  left      margin  0 0 0 5px      moduleMenu-ul  moduleMenu-li a       height  43px      color   777      text-decoration  none      display  block      float  left      line-height  200       padding  8px 15px 0      text-transform capitalize       moduleMenu-ul  moduleMenu-li a hover           color   333          moduleMenu-ul  moduleMenu-li a current      color   FFF      background   FFF url     images module-menu-current-bg gif   top left repeat-x      padding  5px 15px 0      extraModuleMenuOptions       z-index 99999      visibility hidden      position absolute      color  FFFFFF      background-color  236FBD      extraModuleMenuOptions  flow-ul       text-align left      extraModuleMenuOptions  flow-ul  flow-li       display block      extraModuleMenuOptions  flow-ul  flow-li  flow-a       color  FFFFFF

User · Answer

Override the values present in the outer UL with values in inner UL

User · Answer

lets say you have this    lt ul gt       lt li gt  lt  li gt       lt li gt           lt ul gt               lt li gt  lt  li gt               lt li gt  lt  li gt           lt  ul gt       lt  li gt       lt li gt  lt  li gt   lt ul gt    Now if you DONT need IE6 compatibility  reference at Quirksmode  you can have the following css  ul li   background  fff    ul gt li   background  f0f      The  gt  is a direct children operator  so in this case only the first level of lis will be purple   Hope this helps

User · Answer

If the inner object is inheriting properties you don t want  you can always set them to what you do want  ie - the properties are cascading  and so you can overwrite them at the lower level    e g    li-a       font-weight  bold      color  red      li-b       color  blue      In this case   li-b  will still be bold even though you don t want it to be  To make it not bold you can do    li-b       font-weight  normal      color  blue

User · Answer

you can load the new content in an iframe to avoid css inheritance

User · Answer

Using the wildcard   selector in CSS to override inheritance for all attributes of an element  by setting these back to their initial state    An example of its use   li        display  initial

User · Answer

Non-inherited elements must have default styles set  If parent class set color white and font-weight bold style then no inherited child must set  color black  and font-weight  normal in their class  If style is not set  elements get their style from their parents

User · Answer

While this isn t currently available  this fascinating article discusses the use of the Shadow DOM  which is a technique used by browsers to limit how far cascading style sheets cascade  so to speak  He doesn t provide any APIs  as it seems that there are no current libraries able to provide access to this part of the DOM  but it s worth a look  There are links to mailing lists at the bottom of the article if this intrigues you

User · Answer

The short story is that it s not possible to do what you want here  There s no CSS rule which is to  ignore some other rule   The only way around it is to write a more-specific CSS rule for the inner elements which reverts it to how it was before  which is a pain in the butt   Take the example below    lt div class  red  gt   lt  -- ignore the semantics  it s an example  yo  -- gt       lt p class  blue  gt          Blue text blue text           lt span class  notBlue  gt this shouldn t be blue lt  span gt       lt  p gt   lt  div gt   lt div class  green  gt       lt p class  blue  gt          Blue text           lt span class  notBlue  gt blah lt  span gt       lt  p gt   lt  div gt    There s no way to make the  notBlue class revert to the parent styling  The best you can do is this    red   red  notBlue       color  red     green   green  notBlue       color  green

[html] how to prevent css inherit

Examples related to html

Examples related to css