JSFiddle - React, Tailwind, and code Playground

by Benjamin DeLong

HTML

<button id="toggleHighlight">Toggle Highlight</button>
<div id="a" class="aClass"><p>This paragraph is in div A.</p>
    <div id="b" class="bClass"><blockquote><p>This paragraph is in div B, which is a descendant of A.  We apply a highlight style to it however we'd really like that highlight style to not be propagated into certain children.</p>
        <div id="x" class="xClass"><blockquote><p>Here is a random descendant of div B which we want the highlighting to still apply to.</p></blockquote></div>
        <div id="c" class="cClass"><blockquote><p>This content is inside a div of type C.  These kinds of children we'd like to ideally look as close to the way they looked before the highlight as possible.</p></blockquote></div>
        </blockquote>
    </div>
</div>

CSS

.aClass, .highlight .cClass {
    background-image: url('http://hostilefork.com/shared/stackoverflow/parchment.jpg');
    background-repeat: repeat;
}

.aClass, .bClass, .cClass, .xClass, .highlight .cClass {
    border : 2px solid #000;
    margin: 20px;
    padding: 20px;
}

.highlight .cClass{
     color: initial;   
}

.highlight.bClass, .highlight.bclass * {
    background-image: url('http://hostilefork.com/shared/stackoverflow/cc-by-nc-nd.png');
    background-repeat: repeat;
    color: red;
}

JavaScript

$('#toggleHighlight').click(function(){
    $('#b').toggleClass('highlight');
});