CODEWITHSUNDEEP
csscss-selectors
Dan Goodspeed
Dan Goodspeed

Reputation: 3560

Is there a concise way to specify two separate nth-children?

Long story short, I was wondering if there was any way to abbreviate this:

td:nth-child(1), td:nth-child(2) { }

into something like:

td:nth-child(1,2) { }

or maybe a range like:

td:nth-child(1-2) { }

Upvotes: 1

Views: 58

Answers (1)

jfriend00
jfriend00

Reputation: 707198

You can select the first two columns with just this:

td:nth-child(-n+2)

Demo: http://jsfiddle.net/jfriend00/bQ2kc/

Article on this: http://css-tricks.com/how-nth-child-works/

The best I can find for any arbitrary range of columns which at least avoids repeating what comes before the nth-child() specifier is this:

.test .columns td:nth-child(n+1):nth-child(-n+2)

Demo: http://jsfiddle.net/jfriend00/hfuTa/

Article that showed me how: https://gist.github.com/rondevera/167627

Upvotes: 5

Related Questions