Question

With CSS3 I know I can use the nth-child(an + b) selector. I have a table with 5 rows and I would like to select the 1st, 2nd, 4th and 5th rows with one statement. Is this possible or do I have to use a minimum of two statements like this:

:nth-child(-n+2)  /* gets 1 and 2 */
:nth-child(n+4)   /* gets 4 and 5 */

I was hoping for a syntax like nth-child(1,2,4,5) or nth-child(1-2,4-5) but it doesn’t appear to be part of the spec.

(I have no control over the page and there are no IDs/classes on these rows.)

Answer 1

If you want to be explicit, one way is to repeat :nth-child() like so:

tr:nth-child(1), tr:nth-child(2), tr:nth-child(4), tr:nth-child(5)

Alternately, since the table happens to have exactly 5 rows, you can just exclude the third row and you’ll get rows #1, #2, #4 and #5:

tr:not(:nth-child(3))

jsFiddle preview