Utilizing pure CSS to target the first and last classes

Question

Utilizing pure CSS to target the first and last classes

I want to use pure CSS to select only the first and last classes throughout the entire document. In my scenario, the structure looks like this:

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

Check out the demo here

NOTE: I am attempting to do this within a real codemirror matchtags context, so I'm uncertain if the provided structure is accurate. Here is the real codemirror matchtags demo

css css-selectors

Answer 1

Answer №1

It appears that this is the solution you are looking for:

.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: Please note that this solution assumes all span elements have a common class "cm-tag," as shown in the OP's fiddle.

Answer 2

It appears that this is the solution you are looking for:

.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: Please note that this solution assumes all span elements have a common class "cm-tag," as shown in the OP's fiddle.

Utilizing pure CSS to target the first and last classes

Answer №1

Similar questions

The Nodejs express static directory is failing to serve certain files

Replica of Spotify - Bottom Section - HTML and CSS Styling

Utilizing Bootstrap 5's table design to occupy the rest of the available vertical

JavaScript Birthday Verification: Regular Expression Pattern

Angular4 - Div with ngIf doesn't respond to click event

The font remains the same despite the <Div style=> tag

Issue with resizing keyboard/dropdown popup in Android hybrid app when navigating offscreen

Ensure that everything within the Container is not see-through

Adjust the size of three panels (left, middle, right) using Javascript, ensuring that the middle panel remains unchanged in size

What is the best way to include multiple <p> elements in a row using Bootstrap?

Learn the process of covering the entire screen with a video

How can I make one background image extend beyond the grid when there are two background images?

What is the best way to add an Apple iPhone-like effect to a menu list?

What is the best way to set the width of an element to 100% while accounting for padding

Tips on using CSS to hide elements on a webpage with display:none

What is preventing me from adjusting the padding of the mat-button?

Tips for properly aligning an image within an owl carousel

JavaScript function for automatic scrolling to the bottom of the page is not functioning as expected

Creating a design with CSS that features three main content columns of equal height, all of which are scrollable and have fluid heights, along with a sticky

Text using Bootstrap positioned to the right of the breadcrumb navigation bar