:nth-child(2n) of [attribute=value]

Question

I have a list with rows, each li has an attribute data-status which the value can be 1-5:

<ul>
    <li data-status="1"></li>
    <li data-status="2"></li>
    <li data-status="2"></li>
    <li data-status="1"></li>
    <li data-status="1"></li>
    <li data-status="2"></li>
    <li data-status="3"></li>
    <li data-status="4"></li>
    <li data-status="5"></li>
    <li data-status="5"></li>
    <li data-status="1"></li>
</ul>

I want each odd li that the data-status is 1 to be have a different background, is it possible to do in CSS?

score 18 · Accepted Answer · edited May 23 '17 at 12:08

18

If the question is how to select all the odd elements with a particular attribute ?, then it is possible how explained in the other answers, with

li[data-status="1"]:nth-child(2n+1) {
   background: #f00;
}

or in an even easier way:

li[data-status="1"]:nth-child(odd) {
   background: #f00;
}

Take a look at this good article on how nth-child works.

If, instead, the question is how to select all the elements with a particular attribute, and then pick only the odd of that sub-list ? , well, that is not yet possible with CSS, but it will with CSS Selectors Level 4, as explained here, with the nth-match() pseudo-class:

:nth-match(An+B of <selector>)

that in your case would be

li:nth-match(2n+1 of [data-status="1"])

or

li:nth-match(odd of [data-status="1"])

Let's wait... CSS4 is coming !! :P

EDIT: as reported by Michael_B, this feature has been stripped by CSS4 specifications, so stop waiting and start figuring another way to do it :/

edited May 23 '17 at 12:08

Community

1
1

answered May 30 '13 at 12:33

Andrea Ligios

49,480
26
114
243

I just checked [**Selectors 4 spec**](https://drafts.csswg.org/selectors-4/). There is nothing called `nth-match()` defined therein. Maybe it was removed? Whatever the case, it doesn't exist. – Michael Benjamin Feb 13 '16 at 03:07
Ah, on further review, it was removed from the spec: http://stackoverflow.com/a/31415015/3597276 – Michael Benjamin Feb 13 '16 at 03:10
@Michael_B I knew this happened, but I forgot to come here updating the answer (and probably there are another couple of answer of mine to update)... I've did it now, thank you – Andrea Ligios Feb 14 '16 at 23:51
@AndreaLigios, I was really hoping your answer worked! As I'm trying to craft an answer for this question: http://stackoverflow.com/q/35355253/3597276 ... Cheers! – Michael Benjamin Feb 15 '16 at 01:23

Adam Hopkinson · Answer 2 · 2013-05-30T12:28:02.340

2

I believe you can do

li[data-status="1"]:nth-child(odd) {
    background: #f90;
}

There's a working example at http://jsfiddle.net/adamh/ggtff/

edited May 30 '13 at 12:28

answered May 30 '13 at 12:14

Adam Hopkinson

28,281
7
65
99

Absolutely works. I think this is a more common way to write it, though: `li[data-status="1"]:nth-child(2n+1)` – Bill Criswell May 30 '13 at 12:20
@BillCriswell thanks, absolutely right. I've reordered my selector – Adam Hopkinson May 30 '13 at 12:22
3

this does not work if you need to keep even/odd count of data-status="1" only, instead of generic odd-even of *all* rows – Andrea Ligios May 30 '13 at 12:23
@AndreaLigios Yes, actually that's not possible in CSS, `nth-of-type` respects element but not `element[attr]` combination – Mr. Alien May 30 '13 at 12:24
@AndreaLigios if I understand you, I think it does - see my jsfiddle example in the answer above – Adam Hopkinson May 30 '13 at 12:25
@adam You can also make it more plain English just using `li[data-status="1"]:nth-child(odd) {}` – Bill Criswell May 30 '13 at 12:25
this is change the color for all the odd rows that the status=1, in my example it colors the: 1st, 3rd and 4th of the status=1 because those are odd rows. – user2436448 May 30 '13 at 12:33
1

Adam. Andrea is right here. We just got lucky with the
order. This is not working like we thought it was. =(

Bill Criswell

May 30 '13 at 12:34

score 0 · Answer 3 · answered May 30 '13 at 13:02

0

If you're not against using jQuery you can use this approach.

$('li[data-status=1]').toggleClass(function(idx){
  return idx % 2 === 0 ? 'odd-status-one' : 'even-status-one'; 
});

Here's a quick demo: http://jsbin.com/arawur/3/edit

answered May 30 '13 at 13:02

Bill Criswell

32,161
7
75
66

:nth-child(2n) of [attribute=value]

3 Answers3

Linked