making css not affect children

how can I make a css style NOT affect children of that element

$<style type="text/css">
.parent {
background-color: #0F0;}
.child {
    background-color:#fff
}
</style>

<div class="parent">parent<div class="child">child</div>Parent2</div>

(that DOES affect) I know you can you the "<" to apply the style to only children of certain parents but how can the style ONLY be applied to one element?

Technically, your code doesn't apply/affect the style on the children. It just looks like it because of how the markup with css is rendered. So your "child" DIVs do not have #0F0 background color applied to them, but since they are transparent by default it may look like that.

By default, background-color is transparent. If I understand your question correctly, you are seeing the parent's background through the child's transparent one. The only way around this is to set the child's background to be the colour you want it to.

You can't, hence the name "cascading" stylesheets. You just have to override whatever property you don't want the child to inherit.

Actually it doesn't since the child elements all have a background of "none" which displays a see-thru color. To get around this you'll need to define a color for the child element that is not the same as the parent.