Chad Chad - 1 month ago 12
CSS Question

CSS nth-child - get 1st, 2nd, 4th and 5th children at once?

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

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

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

However, 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