JSFiddle - React, Tailwind, and code Playground

HTML

<p class="tab<img>">tab&lt;img&gt;</p>
<hr>
<p>
<span class="tab<Hello! World!>">jQuery</span>
</p>
<hr>
<div class="logbox">
    <pre id="log"></pre>
</div>

CSS

.tab\<img\> {
    background-color : #ffc0cb; 
} 
.tab\<Hello\!:before { 
    content : "Hello! "; 
}
.World\!\>:after { 
    content : " World!"; 
}

.logbox {
    margin: 1em 0;
    padding: 0;
}
#log {
    width: 100%;
    height: 200px;
    border: black solid 1px;
    padding: 5px;
    overflow: scroll;
}

JavaScript

$(function() {
    log($('.tab\\<img\\>').summary());
    log($('.tab\\<Hello\\!, World\\!\\>').summary());
    log($(document.querySelectorAll('.tab\\<img\\>')).summary());
    log($(document.querySelectorAll('.tab\\<Hello\\!, World\\!\\>')).summary());
});

//==================================//

var line = 0;
function log(msg) {
    msg = ('  ' + (++line)).slice(-3) + ': ' + msg;
    if ($('#log').text()) {
        $('#log').text($('#log').text() + '\n' + msg);
    }
    else {
        $('#log').text(msg);
    }
}

$.fn.summary = function() {
    var m = [];
    this.each(function() {
        var str = this;
        if (this instanceof HTMLElement) {
            str = this.nodeName.toLowerCase();
            if (this.id) { 
                str += '#' + this.id; 
            }
            if (this.className) { 
                str += '.' + this.className.split(/\s+/).join('.');
            }
            if (this.src) {
                str += ' ' + this.src;
            }
            if (this.data) {
                str += ' ' + this.data;
            }
        }
        m.push(str);
    });
    return '[' + m.join(', ') + ']';
};