How to prevent css inheritance

Question

Below is an example of the code code that I am using. I have two css sets and you want to apply to two UL components. however, the result is that the internal "UL" will contain the css part specific to its parent. and even some of the css defined in "b" will be canceled by "a" ... a nightmare ...

how can i stop inheritance ???

<ul class="moduleMenu-ul"> /* for loop begin */ <li class="moduleMenu-li"> <a></a> </li> /* for loop end */ <li class="moduleMenu-li"> <a>On Over the div below will be show</a> <div id="extraModuleMenuOptions"> <ul class="flow-ul"> /*for loop begin*/ <li class="flow-li"> <a class="flow-a"></a> </li> /*for loop end*/ </ul> </div> </li> </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; } 

Answer 1

will say that you have this:

 <ul> <li></li> <li> <ul> <li></li> <li></li> </ul> </li> <li></li> <ul> 

Now, if you don't need IE6 compatibility ( Quirksmode link), you can have the following css

 ul li { background:#fff; } ul>li { background:#f0f; } 

> is a direct child operator, so in this case only the first level li will be purple.

Hope this helps

Answer 2

If an internal object inherits properties that you don’t need, you can always set them to what you want (i.e. cascading properties, and therefore you can overwrite them at a lower level).

eg.

 .li-a { font-weight: bold; color: red; } .li-b { color: blue; } 

In this case, “li-b” will still be shown in bold, even if you do not want to. To make it non bold, you can:

 .li-b { font-weight: normal; color: blue; } 

Answer 3

While this is not 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 are cascaded, so to speak. It does not provide any APIs since there are apparently no current libraries capable of providing access to this part of the DOM, but it is worth a look. There are links to the mailing lists at the bottom of the article if this intrigues you.

Answer 4

Inherited elements must have default styles set.
If the parent class sets the style color:white and font-weight:bold , then no inherited child should set the color: black and font-weight: normal in their class. If style not specified, elements get their style from their parents.

Answer 5

The short story is that it is impossible to do what you want here. There is no CSS rule that should “ignore another rule”. The only way is to write a more specific CSS rule for internal elements that return it to what it used to be, which is a pain in the butt.

Take an example below:

 <div class="red"> <!-- ignore the semantics, it an example, yo! --> <p class="blue"> Blue text blue text! <span class="notBlue">this shouldn't be blue</span> </p> </div> <div class="green"> <p class="blue"> Blue text! <span class="notBlue">blah</span> </p> </div> 

Cannot force .notBlue class to revert to parent style. The best you can do is the following:

 .red, .red .notBlue { color: red; } .green, .green .notBlue { color: green; } 

Answer 6

Using the * selector wildcard in CSS to override inheritance for all attributes of an element (by returning them to their original state).

Usage example:

 li * { display: initial; } 

Answer 7

Discard values ​​present in the external UL with values ​​in the internal UL.

Answer 8

you can load new content in iframe to avoid css inheritance.