Workaround for lack of CSS feature to "suppress inherited styles" (and backgrounds?)

Question

I have a DOM situation that looks like this:

• A is an ancestor of B, which is in turn an ancestor of C

• Initially, A has styles that inherit to B and C

• I wish to temporarily highlight B by giving it a highlighted class

  ...however...

• I want to "escape" the highlighting on C so it changes as little as possible

It seems this is not possible 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:

/* http://www.maxdesign.com.au/articles/multiple-classes/ */ .highlighted.class1 {     background-color: ...     background-image: ...     ... } .highlighted.class2 {    ... } /* ... */ .highlighted.classN {    ... } 

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. :-/

Are there any instances of how people have suppressed the inheritance of changes in this fashion? Perhaps using tricks such as caching computed styles? 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."

---

UPDATE I have created a basic JsFiddle of this scenario to help make the discussion clearer:

http://jsfiddle.net/HostileFork/7ku3g/

Answer 1

If I understand correctly, you want to cut a "hole" in the background of an ancestor. The only way I can think of is using <canvas> to cut the hole and then use the resulting image as the background of the ancestor.

Here is my code: http://jsfiddle.net/7ku3g/24/

I used the JS Fiddle logo as the watermark because you cannot retrieve contents of a canvas with cross-origin resources drawn to it.

Update: You would also want to listen to resize events to update the background as the window size changes.