Select last child when odd, 2 last childs when even

Asked 21/4, 2015 at 11:20 Answered 21/4, 2015 at 11:40

I'm in a situation where the number of elements shown is variable, and I need a strange solution that 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 children 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.

Does anyone have any idea/advice about this issue besides adding a class "odd" like on HTML tables?

Thanks a lot in advance!

Dorr answered 21/4, 2015 at 11:20 Comment(0)

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>

Sanative answered 21/4, 2015 at 11:34 Comment(4)

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. – Delorisdelorme 28/10, 2022 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? – Sanative 29/10, 2022 at 16:14

Using FF 106.0.2, which is the latest version for my distro (Mint). Here's what I see snipboard.io/zKWk7e.jpg – Delorisdelorme 30/10, 2022 at 2:24

Apologies @Sanative - It may help for me to scroll the bottom of the list into view! This certainly works. – Delorisdelorme 30/10, 2022 at 2:30

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/

Secrest answered 21/4, 2015 at 11:32 Comment(2)

This code works also perfectly!! But the answer is shorter, which is one point better. Thanks a lot for you help! – Dorr 21/4, 2015 at 14:1

For my need, this one nailed it! – Classical 2/7, 2019 at 20:46

-5

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

Sophisticate answered 21/4, 2015 at 11:40 Comment(3)

How is this "pure CSS"? – Digamy 21/4, 2015 at 11:41

Yep, jquery involved! But, did it mean -1 repo! :( – Sophisticate 21/4, 2015 at 11:45

Yes, I was looking for a only css solution, no js or jq. Thanks for your answer anyway! – Dorr 21/4, 2015 at 14:2

Recommended topics

Hot tags