What's the best way to create a reset style for just a part of the DOM?
I am trying to create a css reset that only targets 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>
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 expected. So what would be the best way to unset the style of all elements in the "container" element and then put the styles in classes inside that element?
source to share
The selector
.innerImg img
refers to an img element within an element with class innerImg. There is nothing like this in your document.
What you probably want is img.innerImg
.
In addition, there is a short calculation for selector specificity that determines which rule to follow. (This link contains my new favorite qualifier in any document: "on a large base system")
source to share
I suspect this result is close to what you wanted.
img
{
border: solid 3px red;
width: 50px;
}
.container .innerImg, .container div
{
border: solid 3px blue;
width: 100px;
}
.container .subContainer
{
border: none;
}
.subContainer .innerImg
{
border: solid 3px green;
width: 200px;
}
source to share