Combining CSS pseudo-classes nth-child and not [duplicate]

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/

Solution

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!

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow