[html] how to prevent css inherit

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???

<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;
}

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:

<div class="red"> <!-- ignore the semantics, it's 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>

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;
}

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.

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

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;
}

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;
}

lets say you have this:

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

Now if you DONT need IE6 compatibility (reference at Quirksmode) you can have the following css

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

The > is a direct children operator, so in this case only the first level of lis will be purple.

Hope this helps

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.

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