Select every other element of class using css3

Question

Given an ul with a structure like this:

<ul>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="spot">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
</ul>

Is there any way using CSS3 to target every other occurance of a li with the class product.

I've tried using both nth-of-child and nth-of-type in various configurations to no luck, both seem to target every other li element regardless of the class is has.

Possible duplicate of http://stackoverflow.com/questions/5080699/using-css-even-and-odd-pseudo-classes-with-list-items — Sampson, Apr 18 '12 at 15:09
I've tried using .product:nth-of-type(2n) and .product:nth-child(2n) but both will count the li element with class=spot in the flow and hit the li element right after the one with class=spot. — Hans Skov, Apr 18 '12 at 15:22
Not sure if this will help, but... http://stackoverflow.com/a/10012244/206403 — gen_Eric, Apr 18 '12 at 15:23
@HansSkov How does it differ? Elements are either odd or even. You want to know how to select all of the evens, or all of the odds. That was the question asked elsewhere, and an answer was provided. — Sampson, Apr 18 '12 at 15:28
@JonathanSampson: He wants all even (or odd) `.product`s, not just all even (or odd) `
@JonathanSampson I want to select every other element with a specific class — Hans Skov, Apr 18 '12 at 15:30
@Rocket So the only difference is the presence of a class in the selector? I personally don't think that merits a new question. — Sampson, Apr 18 '12 at 15:31
@JonathanSampson: given the difficulty we're having providing an answer, it seems to... — David Thomas, Apr 18 '12 at 15:31
@JonathanSampson: I think it does since `.product:nth-child(odd)` doesn't work as expected. This selects elements that are class product AND also an odd child, it doesn't select the odd numbered `.product` elements. — gen_Eric, Apr 18 '12 at 15:35
Does this answer your question? [How can I style even and odd elements?](https://stackoverflow.com/questions/5080699/how-can-i-style-even-and-odd-elements) — shreyasm-dev, Sep 27 '20 at 22:36

score 8 · Answer 1 · edited Apr 18 '12 at 15:37

8

Basically, you can't with plain CSS3. The nth-child selectors work on element selectors, not classes. So, li:nth-child(even) works, but .product:nth-child(even) does not.

You will need jQuery to achieve this.

edited Apr 18 '12 at 15:37

gen_Eric

223,194
41
299
337

answered Apr 18 '12 at 15:23

chipcullen

6,840
1
21
17

This could absolutely be achieved with jQuery, but it's not 'required' as such. – David Thomas Apr 18 '12 at 15:55
Good point - jQuery isn't required - but JavaScript would be. – chipcullen Apr 18 '12 at 17:31

score 4 · Answer 2 · answered Oct 31 '12 at 01:25

Could your problem be solved by overriding spot and selecting every other li (like others have mentioned)? Also, you could select the ul by class name.

How is this:

.ul_class li:nth-child(even) {
    background: #CCC;
}

.spot {
    background: green;
}

The only glitch that might end up looking odd is when 2 spot li`s are right next to each other. I think in every other case spot should look fine.

I also found that this worked fine in chrome:

li.product:nth-child(even) {
    background: #ccc;
}

David Thomas · Accepted Answer · 2012-04-18T15:40:51.323

2

This cannot be done with plain CSS (in any way that I yet know of), however a plain-JavaScript solution is pretty simple:

var lis = document.querySelectorAll('li.product');

for (var i=0,len=lis.length;i<len;i++){
    if (i%2 == 0){
        lis[i].className = 'oddProduct';
    }
}

JS Fiddle demo.

jQuery could be used instead (as could, presumably, any other JavaScript library), but it's certainly not required.

edited Apr 18 '12 at 15:40

answered Apr 18 '12 at 15:09

David Thomas

249,100
51
377
410

1

No, what he's looking for is to only consider those with the class. So in his example html, it would be elements 1,3 and 6 (.spot is skipped). nth-child will match 1,3,7. What he wants is what `:even` in jquery does. Don't think you can do it in pure css. – James Montagne Apr 18 '12 at 15:12
1

@HansSkov, sorry I couldn't come up with a pure-css solution, but the JavaScript version I posted does work. I just hope that it's of some use to you... =/ – David Thomas Apr 18 '12 at 15:43
@DavidThomas Thanks for the effort, seems like JavaScript is the only way to go. I'll give you credit since you're the first answer – Hans Skov Apr 20 '12 at 06:58

Select every other element of class using css3

3 Answers3

Linked

Related