first and last class selector in pure CSS

Question

I need to select only the first and the last classes over the entire document using only pure CSS,
in my case the structure is the following:

<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>

DEMO HERE

NOTE: I'm trying to apply this on a real codemirror matchtags, I'm not sure if that the structure that I posted is correct.. Here the real codemirror matchtags demo

With pure CSS that is not possible. I posted an [answer](http://stackoverflow.com/questions/25094913/hide-the-first-div-with-specific-class/25094973#25094973) yesterday on a similar item (for first class) and there is an even bigger answer posted by BoltClock linked in that thread. Please check if they are of help. — Harry, Aug 03 '14 at 10:28
possible duplicate of [CSS selector for first element with class](http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class) — Paulie_D, Aug 03 '14 at 10:32
@Paulie_D: It's hard to tell if the questions are the same, as the first and last child with a class, and the first and last in the whole document, aren't necessarily the same thing. I just updated my answer over there to note the difference. — BoltClock, Aug 03 '14 at 12:08

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

It looks like this is what you need:

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

UPDATED FIDDLE

Note: This solution relies on the assumption that all the span elements contain a common class cm-tag - as the OP's fiddle shows.

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 03 '14 at 10:31

Danield

121,619
37
226
255

@danield yes but in the real page this seems not work... [please have a look](http://codemirror.net/demo/matchtags.html) – Aug 03 '14 at 10:36
1

@Harry - yes, I just noted that in my answer. But from the OP's code it does look like this is the case – Danield Aug 03 '14 at 10:37
@Danield: Agreed mate. On first look it does seem that way. – Harry Aug 03 '14 at 10:38

first and last class selector in pure CSS

1 Answers1