Select last child when odd, 2 last childs when even

Question

I'm in a situation where the number of elements showed is variable, and I need a strange solution which I'm not able to achieve, I even doubt if it's achievable only with css.

I need to select the last-child if my number of elements is odd, and the last 2 child if the number of elements is even.

I've been trying with nth-last-child, :not(:nth-last-child()), odd and even, but never got a good solution.

Anyone has any idea/advice about this issue a part of adding a class "odd" like on html tables?

Thanks a lot in advance!

score 21 · Accepted Answer · answered Apr 21 '15 at 11:34

21

Here is one way...

.wrap div:last-child,
.wrap div:nth-last-of-type(-n+2):not(:nth-child(even)) {
    color: red;
}

<div class="wrap">
    <div>Odd</div>
    <div>Even</div>
    <div>Odd</div>
    <div>Even</div>
    <div>Odd</div>
    <div>Even</div>
</div>

<hr>

<div class="wrap">
    <div>Odd</div>
    <div>Even</div>
    <div>Odd</div>
    <div>Even</div>
    <div>Odd</div>
</div>

answered Apr 21 '15 at 11:34

Turnip

35,836
15
89
111

This just selects the last two elements when you have an even number of elements, but doesn't select anything when there is an odd number of elements. The answer below is the correct one. – Steve Oct 28 '22 at 21:29
The demo works in every browser I have tested @steve, and has done for the past 7+ years. Can I ask what browser you are using? – Turnip Oct 29 '22 at 16:14
Using FF 106.0.2, which is the latest version for my distro (Mint). Here's what I see https://snipboard.io/zKWk7e.jpg – Steve Oct 30 '22 at 02:24
1

Apologies @Turnip - It may help for me to scroll the bottom of the list into view! This certainly works. – Steve Oct 30 '22 at 02:30

score 18 · Answer 2 · answered Apr 21 '15 at 11:32

18

You can use CSS like so:

li:last-child:nth-child(odd) {
    /* Last child AND odd */
    background: red;
}

li:nth-last-child(2):nth-child(odd),
li:last-child:nth-child(even) {
    /* Before last child AND odd */
    /* Last child AND even */
    background: green;
}

Demo: https://jsfiddle.net/hw0ehrhy/

answered Apr 21 '15 at 11:32

Bluety

1,869
14
22

1

This code works also perfectly!! But the answer is shorter, which is one point better. Thanks a lot for you help! – agapitocandemor Apr 21 '15 at 14:01
For my need, this one nailed it! – Filgaia Jul 02 '19 at 20:46

score -5 · Answer 3 · answered Apr 21 '15 at 11:40

Absolutely it can be done, with pure CSS. See the complete code below (odd child, last child red; even childs, last 2 childs green)

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('#but1').click(function(){
            var count = $('p').length; 
            if (count%2!=0) {$('div>p:last-child').css('background','red');}
            else {$('div>p:last-child').css('background','green');alert(count);
                $('div>p:nth-last-child(2)').css('background','green');
            }
        });
    });
</script>
</head>
<body>
<button id=but1>Click</button>
<div>
<p>This is one.     </p>
<p> This is two.    </p>
<p> This is three.  </p>
<p> This is four.   </p>
<p> This is five.   </p>
<p> This is six.    </p>
</div>
</body>
</html>

Enjoy, the coding ;)

Yes, I was looking for a only css solution, no js or jq. Thanks for your answer anyway! — agapitocandemor, Apr 21 '15 at 14:02

Select last child when odd, 2 last childs when even

3 Answers3

Linked