How can I disable inherited css styles?

Question

So I am creating a container with rounded corners using the following method: ``` div.rounded { background: #CFFEB6 url('tr.gif') no-repeat top right; } div.rounded div { background: url('br.gif') no-repeat bottom right; } div.rounded div div { background: url('bl.gif') no-repeat bottom left; } div.rounded div div div { padding: 10px; } ``` Now I want to use a div inside my container: ``` .button { border: 1px solid #999; background:#eeeeee url(''); text-align:center; } .button:hover { background-color:#c4e2f2; }

Test

``` However, with I put a div inside my nested divs, the button has the bl image in the corner. How do I remove the inherited background image?

Accepted Answer

The simple answer is to change

```
div.rounded div div div {
    padding: 10px;
}
```

to

```
div.rounded div div div {
    background-image: none;
    padding: 10px;
}
```

The reason is because when you make a rule for `div.rounded div div` it means every `div` element nested inside a `div` inside a `div` with a class of `rounded`, regardless of nesting.

If you want to only target a div that's the direct descendent, you can use the syntax `div.rounded div > div` (though this is only supported by more recent browsers).

Incidentally, you can usually simplify this method to use only two `div`s (one each for either top and bottom or left and right), by using a technique called Sliding Doors.

How can I disable inherited css styles?

Solution

Problem