CSS pseudo classes ordering :nth-child and :not

Question

I have the following code:

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

I've styled this list with grey stripes:

.list li:nth-child(2n) {
    background-color: #ccc;
}

Works great, but then I hide some of the li elements and the order of the stripes breaks. Fiddle

I've tried updating the selector with :not():

.list li:not(.hidden):nth-child(2n) {
    background-color: #ccc;
}

But this was useless.

Could anyone advice how to order pseudo classes to keep stripes order?

Answer 1

AFAIK, nth-child works on element positions or index. So, even if you hide the element, the other element positions/indexes doesn't change.

I think your better option here is to do this completely with jQuery as I shown below as just an example:

$(function () {
    $('.list li:not(.hidden):odd').addClass('paint');
    $('.hide_some').click(function () {
        $('.list li').eq(0).addClass('hidden');
        $('.list li').eq(2).addClass('hidden');
        $('.list li').eq(5).addClass('hidden');
        // again remove the paint
        $('.list li').removeClass('paint');
        // again add new paint
        $('.list li:not(".hidden"):odd').addClass('paint');
    })
})

Working Fiddle