纯CSS中的第一个和最后一个类选择器

Question

我只需要在整个文档中使用纯CSS选择第一个和最后一个类，
在我的例子中，结构如下:

<div class="Container">
    <div>
        <div class="Parent"></div>
        <pre>
            <span>
                <span class="myClass">YES</span>
                <span class="myClass">NO</span>
                <span class="myClass">NO</span>
            </span>
        </pre>
    </div>
    <div>
        <div class="Parent"></div>
        <pre>
            <span>
                <span class="myClass">NO</span>
                <span class="myClass">NO</span>
                <span class="myClass">YES</span>
            </span>
        </pre>
    </div>
</div>

演示

注意:我试图将此应用于一个真正的codemmirror匹配标签，我不确定我发布的结构是否正确。这里真正的codemmirror匹配标签演示

Answer 1

看起来这就是你需要的:

.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;
}

更新小提琴

注意:此解决方案依赖于所有span元素包含一个公共类cm-tag的假设-如OP的fiddle所示。