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?

Can you remove those elements instead of hiding? [fiddle](http://jsfiddle.net/venkateshwar/wV2PS/4/) — Mr_Green, Jun 11 '14 at 07:52
`:nth-child()` does not take into account any other selector. The order of children does not change when you add classes, etc. — BoltClock, Jun 11 '14 at 07:53
@feeela: Yeah, lots of them, but I'm having trouble finding any of them using the site search, go figure. The [spec](http://www.w3.org/TR/selectors/#nth-child-pseudo) isn't very clear on this either. However, I can speak authoritatively when I say that that is how it works. Maybe I should just answer this question despite it being an umpteenth duplicate. — BoltClock, Jun 11 '14 at 08:18
Possibly duplicates: http://stackoverflow.com/questions/22770593/excluding-an-element-from-nth-child-pattern, http://stackoverflow.com/questions/17458582/css-selectors-nth-childeven-odd-with-class — Ilya Streltsyn, Jun 11 '14 at 08:37
@Ilya Streltsyn: Thanks. There really needs to be a canonical question for this problem, but the site search isn't helping one bit. I don't mind writing an answer, but 1) I need to make sure that I haven't written one already, and 2) we need to find a good canonical question, not just any old unanswered question. — BoltClock, Jun 11 '14 at 08:40
@Ilya Streltsyn: Finally found one: http://stackoverflow.com/questions/5545649/css3-nth-childodd-with-a-selector Go ahead and cast a duplicate vote with one of your links and I'll add this as a second and expand on my existing answer. — BoltClock, Jun 11 '14 at 08:54
@BoltClock, interestingly, the CSS Selecors 4 spec has changed recently, and now it proposes `:nth-child(... of selector)` instead of `:nth-match(... of selector)`. However, it doesn't change anything in practice, AFAIK, since no browser supports either syntax. — Ilya Streltsyn, Jun 11 '14 at 09:01
@Ilya: I think this discussion has a better place under one of our answers - the comments here are getting a bit messy. I can't migrate comments though. — BoltClock, Jun 11 '14 at 09:06

score 1 · Accepted Answer · answered Jun 11 '14 at 08:35

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

Yeap, thx, looks like there are no ways to manage it with plain css — Evgeniy, Jun 11 '14 at 08:39

CSS pseudo classes ordering :nth-child and :not

1 Answers1