CODEWITHSUNDEEP
csscss-resetcss-specificity
JoshNaro
JoshNaro

Reputation: 2097

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

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?

Upvotes: 1

Views: 354

Answers (2)

user1976
user1976

Reputation:

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;  
}

Upvotes: 0

Jesse Millikan
Jesse Millikan

Reputation: 3145

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")

Upvotes: 3

Related Questions