Question

I would like make all text within div.main gray except for all content within the child div.exception. div.exception should appear as if class main was never added to the parent div.

Is this possible? If so, how? Thanks!

<style type="text/css">
.main{color: gray;}
.hello{color: red;}
</style>
<div class="main">
 <div>
  <div class="exception"><p class="hello">Hello</p><a>Link</a></div>
 </div>
 <div><p>Howdy</p></div>
 <div><a>Link</a></div>
</div>

Answer 1

No, that’s not possible.

You can easily override the style so that it appears not to have been colored gray, but then you have to know what the original color was:

.main .exception { color: black; }

If you would set the style on the inner elements directly intead of on the main element, and set the exception class on the same level, you could override it using inheit:

<style type="text/css">
.main div { color: gray; }
.main div.exception { color: inherit; }
.hello { color: red; }
</style>
<div class="main">
  <div class="exception">
    <div><p class="hello">Hello</p><a>Link</a></div>
  </div>
  <div><p>Howdy</p></div>
  <div><a>Link</a></div>
</div>