Applying css styles to elements within certain order [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 5 years ago.
So I have a situation, where I have a list of elements like these:
<li class="a">1</li>
<li class="a">2</li>
<li class="a">3</li>
<li class="b">4</li>
<li class="b">5</li>
<li class="a">6</li>
<li class="a">7</li>
Now what I want to achieve is to use CSS queries to apply red background to the first and last occurrence of a. So in the example above: 1, 3, 6, 7 will have the background color red.
How can this be achieved using css? I have tried using css siblings queries but I can't find a way to determine when the switch from a -> b happens.

Answer 1

.a:nth-child(1) {
background: red none repeat scroll 0 0;
}
.a:nth-child(3) {
background: red none repeat scroll 0 0;
}
.a:nth-child(6) {
background: red none repeat scroll 0 0;
}
.a:nth-child(7) {
background: red none repeat scroll 0 0;
}
<li class="a">1</li>
<li class="a">2</li>
<li class="a">3</li>
<li class="b">4</li>
<li class="b">5</li>
<li class="a">6</li>
<li class="a">7</li>
you just need to change no which one you want to be make red background
.a:nth-child(no will come here ) {
background: red none repeat scroll 0 0;
}

Answer 2

As i understand from your question you need to apply background color red on every occurance first and last child elements. for this please refer the following css code.
.a:nth-child(2n+1), .a:nth-last-child(2) {
background: red;}