What's the best way to create a style reset for only a portion of the DOM?

StackOverflow https://stackoverflow.com/questions/334705

  •  22-07-2019
  •  | 
  •  

Question

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?

Was it helpful?

Solution

The selector .innerImg img refers to an img element inside an element with the class innerImg. There's nothing like that in your document.

What you probably want there is img.innerImg .

Beyond that, there is a short calculation for selector specificity that determine which rule is followed. (That link contains my new favorite qualifier in any document: "in a number system with a large base")

OTHER TIPS

I suspect this results in 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;  
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top