Search code examples
csshtmlchildren

Exclude div children to have a global css rule and force them to inherite from parent

I have this CSS rule: * { font:normal 12px puertoHelve,tahoma; }

Then I have divs like these (the children divs are created automatically):

<div class="asUserStyle" style="font-weight:bold;text-align:right;font-family:times new roman;font-size:16px;color:#000000;">
    test0
    <div>test1</div>
    <div>test2</div>
</div>

Now only test0 has the style applied to it but not the other divs; they have the previous rule.

Any ideas in CSS? If not, jQuery maybe..?

Solution

  • http://jsfiddle.net/R7umu/2/

    .asUserStyle div {
    //your other styles
}

    Edit:

    http://jsfiddle.net/R7umu/3/

    So the div has to inherit all defined styles from .asUserStyle:

    .asUserStyle div {
    margin: inherit;
    color: inherit;
    .....
}