JSFiddle - React, Tailwind, and code Playground

HTML

<section>
	<p>Treacherous HTML ahead!</p>

	<div id="make-me-blue">
		<!-- Make me blue! -->
	</div>

	<div></div>

	<div><!-- Make me blue! --></div>
</section>

<section>
	
	<p>Can you make this span blue too? <span><!-- Make me blue! --></span></p>
	<p>But not <span>this one!</span></p>

	<div></div>

	<p>Yes, I know, HTML can be mean sometimes. But it is not on purpose! 
		<span>Or is <i>it?</i> <i><!-- Make me blue! --></i></span></p>

	<div><div><!-- Make me blue! --></div></div>
</section>

CSS

BODY {
    font-family: sans-serif;
    margin: 50px;
    
}

DIV,
SPAN,
I {
    display: inline-block;
    width: 15px;
    height: 5px;
}

._blue {
    background: lightblue;    
}

JavaScript

function findNodeType($context, nodeType, textVal) {
    $context
        .contents()
        .filter(function() {
            if ($(this).contents().length) {
                findNodeType($(this), nodeType, textVal)
            }
            
            return this.nodeType == nodeType && ($.trim(this.textContent || this.innerText) == textVal);
        }).each(function() {
            makeBlue($(this));
        });
}

function makeBlue($el) {
    $el
        .parent()
        .addClass('_blue');
}

$('SECTION').each(function() {
    var $th = $(this);
    
    findNodeType($th, 8, 'Make me blue!');
});