Workaround for lack of CSS feature to "suppress inherited styles" (and backgrounds?) <p>I have a DOM situation that looks like this:</p> <ul> <li><p><strong>A</strong> is an ancestor of <strong>B</strong>, which is in turn an ancestor of <strong>C</strong></p></li> <li><p>Initially, <strong>A</strong> has styles that inherit to <strong>B</strong> and <strong>C</strong></p></li> <li><p>I wish to temporarily highlight <strong>B</strong> by giving it a <em>highlighted</em> class</p> <p>...however...</p></li> <li><p>I want to "escape" the highlighting on <strong>C</strong> so it changes as little as possible</p></li> </ul> <p>It seems <a href="http://stackoverflow.com/questions/1046872/how-can-i-disable-inherited-css-styles">this is not possible</a> within the cascading paradigm of CSS. The only way to "un-apply" a style is to apply an overriding style. My problem is that the highlight code is in a plugin that wants to play well with an arbitrary page's existing CSS...my selectors are like this:</p> <pre><code>/* http://www.maxdesign.com.au/articles/multiple-classes/ */ .highlighted.class1 { background-color: ... background-image: ... ... } .highlighted.class2 { ... } /* ... */ .highlighted.classN { ... } </code></pre> <p>Background is a tricky one...because although it is not an inherited CSS property, changing an ancestor's background can alter a descendant's appearance (if they have transparent backgrounds). So it's an example of something that causes the kind of disruption I'm trying to negate. :-/</p> <p>Are there any instances of how people have suppressed the inheritance of changes in this fashion? Perhaps using tricks such as <a href="http://stackoverflow.com/questions/1004475/jquery-css-plugin-that-returns-computed-style-of-element-to-pseudo-clone-that-el">caching computed styles</a>? I'm looking for any default technique that can be at least a little smarter than a function-level hook that says "hey, the plugin highlighted this node...do what you need to visually compensate."</p> <hr> <p><strong>UPDATE</strong> I have created a basic JsFiddle of this scenario to help make the discussion clearer:</p> <p><a href="http://jsfiddle.net/HostileFork/7ku3g/">http://jsfiddle.net/HostileFork/7ku3g/</a></p>