Some Extremely Handy `:nth-child` Recipes as Sass Mixins

There is no such thing as one-size-fits-all styling. An image gallery with three images might need to be styled differently than an image gallery with twelve. There are some cool tricks that you can use to add some number-based logic to your CSS! Using :nth-child and :nth-last-child, you can get some surprisingly complex information without ever leaving your stylesheet.

This post will assume that you have a basic understanding of how the :nth-child pseudo-selector works. If you need a quick refresher, Chris has a great post covering that topic.


Cicada Principle and CSS

Charlotte Jackson uses this classic clever technique to pseudo randomize border-radius, making irregular circles for a photo grid.

A cicada is a rather grim looking little bug. You may have heard of them. There is a kind called the Periodical Cicada, which simultaneously emerge in masses every 7, 11, 13 or 17 years; they find a mate and then they die. It's not much of a life.

However, the interesting thing is that these numbers are all prime numbers.

Alex Walker dug into this back in 2011 and made some cool demos like randomized non-repeating backgrounds and infinite lego dude variations.

Here's a demo by yoksel combining the idea with blend modes:

See the Pen The Cicada Principle background + background-blend-mode by yoksel (@yoksel) on CodePen.