JSFiddle - React, Tailwind, and code Playground

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 child 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 child 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, .bClass, .cClass, .xClass {
    border : 2px solid #000;
    margin: 20px;
    padding: 20px;
}

.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');
    bgfix();
});

function bgfix() {
    var b = document.getElementById('b');
    var c = document.getElementById('c');
    
    var b_bounds = b.getBoundingClientRect();
    var c_bounds = c.getBoundingClientRect();
    
    var b_style = window.getComputedStyle(b);
    var b_left = b_bounds.left + parseInt(b_style.borderLeftWidth);
    var b_top = b_bounds.top + parseInt(b_style.borderTopWidth);
    
    var canvas = document.createElement('canvas');
    canvas.width = b_bounds.width;
    canvas.height = b_bounds.height;
    var ctx = canvas.getContext('2d');
    
    var watermark = new Image();
    watermark.src = '/img/logo.png';
    watermark.onload = function () {
        ctx.fillStyle = ctx.createPattern(watermark, 'repeat');
        //ctx.fillStyle = 'gray';
        ctx.fillRect(0, 0, b_bounds.width, b_bounds.height);
        
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillStyle = 'black';
        ctx.fillRect(c_bounds.left - b_left, c_bounds.top - b_top, c_bounds.width, c_bounds.height);

        b.style.backgroundImage = "url('" + canvas.toDataURL() + "')";
    };
}