:nth-child(even/odd) selector with class

Question

I'm trying to apply odd/even selectors to all elements in a list with the class parent.

HTML:

<ul>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
</ul>

CSS:

.parent:nth-child(odd) {
    background-color: green;
}

.parent:nth-child(even) {
    background-color: red;
}

ul {
    width:100px;
    height: 100px;
    display: block;
}

enter image description here

Link to jsFiddle

But the colors are resetting. I want the list items to be the color of the text.

Is there a way to do this?

@CodyGuldner: He wants the "ho ho ho" to not count for purposes of zebra striping. — Jon, Jul 03 '13 at 21:54
@AleksG Hum, I can't get that to work, do you mind showing me in a jsFiddle? Do it as an answer and I will accept it. — nilsi, Jul 03 '13 at 21:55
I would think that `nth-of-type` would work, because the third `li` doesn't have that class. But for some reason it doesn't — Cody Guldner, Jul 03 '13 at 21:56
`nth-of-type` only takes the "expanded element name" into account when deciding what "type" means. Since all of the children here are `

score 24 · Accepted Answer · answered Jul 03 '13 at 22:04

In general what you want is not possible, but there is a way to achieve the desired behavior for limited numbers of "excluded" elements: the general sibling combinator ~.

The idea is that for each occurrence of a non-.parent element subsequent .parent elements will have their colors toggled:

.parent:nth-child(odd) {
    background-color: green;
}
.parent:nth-child(even) {
    background-color: red;
}

/* after the first non-.parent, toggle colors */
li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: red;
}
li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* after the second non-.parent, toggle again */
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: green;
}
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(even) {
    background-color: red;
}

See it in action.

Of course there is a limit to how far one would be willing to take this, but it's as close as you can get with pure CSS.

@ScottS: Definitely. In general one should go with JS here, but there may be fringe cases where the technique is useful. — Jon, Jul 03 '13 at 22:20
Hello in 2020. For guys who will look for solution. This one doesn`t work well. Demo: https://jsfiddle.net/f6h9vm5o/ — Kazbek, Jul 01 '20 at 21:59
@Kazbek the idea here is that you need to repeat the last two CSS declarations, adding a `li:not(.parent) ~` in front each time and swapping the colors. You need to do this as many times as there will be `:not(.parent)` items, and then it works as intended: https://jsfiddle.net/oncL3dva/. Granted this is not practical and you'd be much better off using JS for this, but it works in 2020 as well as it worked in 2013. — Jon, Jul 02 '20 at 08:13

ScottS · Answer 2 · 2013-07-03T22:11:19.023

This is a common misperception

The :nth-child and :nth-of-type selectors do not look at "class" or anything else for counting. They only look at either (1) all elements, or (2) all elements of a certain "type" (not class, not an attribute, nothing but the type of element--div or li etc.).

So you cannot skip it with pure CSS without either knowing your exact html structure (and then, only if there are in fact a few elements you are dealing with--see Jon's answer for one such way, where you need to know how many non-parent elements you are dealing with, and as you can see and he notes the practical limits are very small), or by using javascript.

score 6 · Answer 3 · answered Jul 03 '13 at 22:13

It will be possible only with CSS Selectors 4 which will have nth-match.

In the existing CSS it can be done only in some limited situations using the general sibling combinator multuple times, like in @Jon's answer or even in a more 'mechanical' way (example):

.parent,
.parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent
{
    background-color: green;
}

.parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent
{
    background-color: red;
}

In practice, it seems better to me to use JS/jQuery for this.

score 4 · Answer 4 · edited Jun 20 '20 at 09:12

CSS

The other reliable way to replicate this currently is with the adjacent sibling selector:

.parent,
.parent + .parent + .parent,
.parent + .parent + .parent + .parent + .parent /* etc */
{ background-color: green; }

.parent + .parent,
.parent + .parent + .parent + .parent /* etc */
{ background-color: red; }

You have three options:

Use the not() selector. This will keep your highlighting going indefinitely, but it will occasionally flip the order that it highlights in. Use this option if your list could have huge groupings of the elements you want to highlight.
Use the + (adjacent sibling) selector. This option will not keep highlighting indefinitely, but it guarantees that the order will never be flipped. Use this option if your list will have smaller groupings of highlighted elements together.
Use the ~ (any sibling) selector. I would not recommend this as the list will fail to highlight properly based on total list length rather than total matching siblings. This will always fail before the other two options, and more noticeably.

Fiddle here: http://jsfiddle.net/corymcd/kVcZJ/

Feel free to copy the HTML from this and paste it into the ones that the other people demonstrated their methods with.

jQuery

As stated before, using something like jQuery would easily allow you to either assign your elements even/odd classes or simply change the inline style.

// Find all objects to highlight, remove all of the highlighting classes, 
// and then re-highlight.
$(".parent").removeClass('odd even').each(function(index) {
    var objPrev = $(this).prev('.parent');
    if( objPrev.hasClass('odd') ) {
        $(this).addClass('even');
    } else {
        $(this).addClass('odd');
    }    
});

Fiddle here: http://jsfiddle.net/corymcd/kAPvX

$(".data_wrapper").removeClass('oddBg evenBg').each(function(index) { if(index % 2 == 0){ $(this).addClass('oddBg'); } else { $(this).addClass('evenBg'); } }); — Kamlesh, Aug 27 '20 at 18:39

:nth-child(even/odd) selector with class

4 Answers4

This is a common misperception

CSS

jQuery

Linked

Related