I'm trying to create a css reset that targets only my control. So the HTML will look something like this:
<body>
<img class="outterImg" src="sadkitty.gif" />
<div id="container" class="container">
<img class="innerImg" src="sadkitty.gif" />
<div class="subContainer">
<img class="innerImg" src="sadkitty.gif" />
</div>
</div>
<img class="outterImg" src="sadkitty.gif" />
</body>
The CSS is what I'm having trouble with, but I'm currently working with this:
img
{
// Bad style declarations for the entire page
border: solid 3px red;
width: 50px;
}
.container img, .container div, .container etc.
{
// Style reset for specific elements within my control "container"
border: solid 3px blue;
width: 100px;
}
.innerImg img
{
// The target style for the specific class/element within the control
border: solid 3px green;
width: 200px;
}
The problem is that ".innerImg img" does not override ".container img" as I would expect. So, what would be the best method for resetting the style of all elements within the "container" element, and then placing styles on classes within that element?