Quantity Queries

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

Using :nth-child (and friends), you can write selectors that target elements when they have a certain number of siblings. So you can write CSS that, for example, styles widgets to be 33.33% wide if there are exactly 3 of them.

The selectors are a bit complicated though, so this tool by Drew Minns is pretty helpful.

And perhaps controversially, a PostCSS plugin for the same.

Direct Link →