Databases
StackOverflow2013
Postsdbo
POWorkaround for lack of CSS feature to "suppress inherited styles" (and backgrounds?)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWorkaround for lack of CSS feature to "suppress inherited styles" (and backgrounds?)
    text
    copied!<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="https://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="https://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/" rel="nofollow noreferrer">http://jsfiddle.net/HostileFork/7ku3g/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload