css selectors first and last occurance [duplicate] - html

Question

This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 3 years ago.
I want to set a style on the first and last of the elements. The number of sections can vary on each odd/even, so I can not do anything like "every 3rd element then use this CSS-rule". The elements are inside one parent element, here a <div>.
What I want to achieve is that everytime the odd-section occures for the first time in this list of spans, I want to add some style, and the samme with the last occurance of odd-section. Then It begins again with the same logic for the even-section, and again for the odd-section, and then again even-section:
<div>
<span class="odd-section"></span>
<span class="odd-section"></span>
<span class="odd-section"></span>
<span class="even-section"></span>
<span class="even-section"></span>
<span class="even-section"></span>
<span class="odd-section"></span>
<span class="odd-section"></span>
<span class="odd-section"></span>
<span class="even-section"></span>
<span class="even-section"></span>
<span class="even-section"></span>
</div>
Is there a way to do this?
It would be so much better if every odd-section / even-section part had a parent <div>, but that is not the case here.

Answer 1

You can use the following adjacent sibling selector and first child pseudo selector to select the first of each group
If the spans are always in groups of 3s, then you could use a double adjacent for the last of each group
.odd-section:first-child,
.even-section+.odd-section {
/* this highlights the first in each group */
border: 1px solid blue;
}
.odd-section+.odd-section+.odd-section {
/* this highlights the last in each group */
border: 1px solid green;
}
<div>
<span class="odd-section">odd</span>
<span class="odd-section">odd</span>
<span class="odd-section">odd</span>
<span class="even-section">even</span>
<span class="even-section">even</span>
<span class="even-section">even</span>
<span class="odd-section">odd</span>
<span class="odd-section">odd</span>
<span class="odd-section">odd</span>
<span class="even-section">even</span>
<span class="even-section">even</span>
<span class="even-section">even</span>
</div>
Unfortunately, if your odds and evens are not in groups of three, you will not be able to use css to select the last element of the group, instead you would either need to add a class using your server side language, or use a js approach
Below is a quick example of how you can use jquery to add a class to the last of each group
$('.odd-section').filter(function() {
return $(this).is(':last-child') || $(this).next('.even-section').length;
}).addClass('last-section');
.odd-section:first-child,
.even-section+.odd-section {
/* this highlights the first in each group */
border: 1px solid blue;
}
.last-section {
/* this highlights the last in each group */
border: 1px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<span class="odd-section">odd</span>
<span class="odd-section">odd</span>
<span class="odd-section">odd</span>
<span class="even-section">even</span>
<span class="even-section">even</span>
<span class="even-section">even</span>
<span class="odd-section">odd</span>
<span class="odd-section">odd</span>
<span class="odd-section">odd</span>
<span class="even-section">even</span>
<span class="even-section">even</span>
<span class="even-section">even</span>
<span class="odd-section">odd</span>
<span class="odd-section">odd</span>
</div>