JSFiddle - React, Tailwind, and code Playground

by danield770

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:first-child  .cm-tag:first-child {
    border: 1px solid red;
}
.CodeMirror-code > div:last-child .cm-tag:last-child {
    border: 1px solid blue;
}

/* 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'});
*/