Combining CSS pseudo-classes nth-child and not

Question

I have a table and I want to shade each alternate row, apart from the row with the class "openingTimes".

This opening times row should not be shaded, but the pattern after this row should be continued, like this, (with bold representing shading!):

[ Info 1 ] [ Info 2 ] [ Opening Times Row ] [ Info 3 ] [ Info 4 ] [ Info 5 ] [ Info 6 ]

The CSS I have is:

table tr:not(.openingTimes):nth-child(even)
{
    background-color: #eeeeee;
}

But what this results in is:

[ Info 1 ] [ Info 2 ] [ Opening Times Row ] [ Info 3 ] [ Info 4 ] [ Info 5 ] [ Info 6 ]

I want the Info 3 to be shaded and the pattern to continue from there.

What am I doing wrong? Thanks!

Edit: OK, here's a fiddle: http://jsfiddle.net/QWjnm/

Why not just add a class to each of the rows (excluding `.openingTimes`), then apply `nth-child()` to that class? — Austin Brunkhorst, Feb 10 '14 at 11:27
`nth-child` does not work on siblings with different classes, at least not the way you might think it will. — Paulie_D, Feb 10 '14 at 11:28
@AustinBrunkhorst I could do yes, I'm more just trying to clarify the behaviour of this selector as the results surprised me :) — Fiona - myaccessible.website, Feb 10 '14 at 11:30
Actually @AustinBrunkhorst, that doesn't work either - seems like it is just ignoring the class selector completely: http://jsfiddle.net/U3fqA/ — Fiona - myaccessible.website, Feb 10 '14 at 11:33
I believe @AustinBrunkhorst meant to give only those trs that you want to shade another class. Like in [this fiddle](http://jsfiddle.net/MrLister/U3fqA/1/). I still think mine works better though. — Mr Lister, Feb 10 '14 at 11:36
To re-interate `nth` selectors do **NOT** work on classes only elements. — Paulie_D, Feb 10 '14 at 11:37
Yeah I think @MrLister 's solution gets me what I actually want in this case, if you add it as an answer I'll accept :) — Fiona - myaccessible.website, Feb 10 '14 at 11:39
Wait a minute. Stupid question, but do you _need_ to shade the first row? Otherwise, you could just write `tr:nth-child(even)` which just happens to skip the openingTimes one. — Mr Lister, Feb 10 '14 at 12:09

Mr Lister · Accepted Answer · 2015-04-28T16:32:59.437

5

The nth-child syntax isn't complex enough to allow for what you want.

In your example however, you can write

tr:first-child, tr:nth-child(2n+4)

for a selector.

This means use the first child, and also every even child starting at the fourth.

It's not an ideal solution; you don't have any control over the openingTimes class any more, but I can't think of any solution where you do. Sorry!

edited Apr 28 '15 at 16:32

answered Feb 10 '14 at 11:43

Mr Lister

"every other child starting at the fourth." is wrong, it's every other **even** child starting at the fourth. – Apolo Apr 28 '15 at 15:30
@Apolo Hey, "every other" does not mean the same as "every". Look it up. And I'm not even sure the sentence is grammatically correct after your edit. – Mr Lister Apr 28 '15 at 16:28
I just wanted to precise, but english is not my favorite language, re-edit if you think it's wrong – Apolo Apr 28 '15 at 16:29
but "every other child starting at the fourth" make me think it's 4,5, 6 and so on... – Apolo Apr 28 '15 at 16:30
@Apolo But it really means 4, 6, 8 and so on. I can edit so that it is both correct and clear though... – Mr Lister Apr 28 '15 at 16:32

1 Answers1