JSFiddle - React, Tailwind, and code Playground

HTML

I need to select only the first and the last "CodeMirror-matchingtag" classes<br>
over the entire document using only pure css
<div class="CodeMirror-code">
    
    <div>
        <div class="CodeMirror-gutter-wrapper"></div>
        <pre>
            <span>
                <span class="cm-tag cm-bracket CodeMirror-matchingtag">YES</span>
                <span class="cm-tag CodeMirror-matchingtag">NO</span>
                <span class="cm-tag cm-bracket CodeMirror-matchingtag">NO</span>
            </span>
        </pre>
    </div>
    
    <div>
        <div class="CodeMirror-gutter-wrapper"></div>
        <pre>
            <span>
                <span class="cm-tag cm-bracket CodeMirror-matchingtag">NO</span>
                <span class="cm-tag CodeMirror-matchingtag">NO</span>
                <span class="cm-tag cm-bracket CodeMirror-matchingtag">YES</span>
            </span>
        </pre>
    </div>
    
</div>

CSS

/* http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class#8539107 */
/*
.CodeMirror-code > div > pre > span > .CodeMirror-matchingtag {
    border: 1px solid red !important;
}
.CodeMirror-code > div > pre > span > .CodeMirror-matchingtag ~ .CodeMirror-matchingtag {
    border: none !important;
}
*/
/* BUT IT DOES NOT WORK WITH MY CASE */

JavaScript

//THIS IS EXACTLY WHAT I WANT, BUT IN PURE CSS
/*
$('.CodeMirror-matchingtag:first').addClass("XXXfirst");
$('.CodeMirror-matchingtag:last').addClass("XXXlast");

$('.XXXfirst').css({'border':'2px solid blue'});
$('.XXXlast').css({'border':'2px solid red'});
*/