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

<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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

Using the * wildcard in CSS prevents inheritance since it applies to all elements.

An example of its use: * li {display:list-item;} * li li {display:inline;}