Randomization with nth-child and Cicada Principle

So, what are we talking about here? Let’s go over some background:

The end goal is to achieve randomness on websites with CSS without the aid of other programming languages like Javascript. Random numbers in programming aren’t truly random - there’s always something that could potentially make a duplicate number if the conditions are correct. Most random number generators go off the computer’s internal timer so that could be manipulated if you really want to. This is why we generally add a random salt to a randomization algorithm to add in some spice to whatever it is we’re generating. That salt is usually a string.

It’s also important to note that CSS isn’t really a programming language so generating randomness, like a random number, isn’t easily achievable. We have to do some fun stuff to make it work.

The cicada principle

You can read more about the cicada principle in relation to web design there. In summary, we look to nature to find randomness and see that cicadas emerge have prime numbered year life cyles - 7, 11, 13, and 17 years. It’s really interesting, that through evolution, they emerge in prime numbered years to avoid predators who have a much shorter life cycle.

Prime numbers are the key point here and it can be used in CSS to make things appear random when they actually aren’t. In conjunction with nth-child, you’ll be able to make patterns that look random and don’t repeat for a very long time.

:nth-child() is a pseudo selector in CSS that lets you target a child element by number index. Check out a deeper explanation here.

How does it work?

div:nth-child(2n) {...}
div:nth-child(3n) {...}
div:nth-child(5n) {...}
div:nth-child(7n) {...}
div:nth-child(11n) {...}
div:nth-child(13n) {...}
div:nth-child(17n) {...}
                                                

Quick note: using “n” after the number makes it target in an interval instead of that specific index. So, nth-child(2) targets the 2nd one and nth-child(2n) targets the 2nd one and then the 2nd one after that repeated forever.

In the example below, I’ve added in even more prime number randomness to make it even better, check it out:

div{
    height: 10px;
    background: pink;
}

div:nth-child(2n) {
  background: FireBrick;
}
div:nth-child(3n) {
  background: lightblue;
}
div:nth-child(5n) {
  background: orange;
}
div:nth-child(11n) {
  background: purple;
}
div:nth-child(13n) {
  background: green;
}
div:nth-child(17n) {
  background: gray;
}

div:nth-child(2n+1) {
  background: DarkKhaki;
}
div:nth-child(3n+2) {
  background: MediumTurquoise;
}
div:nth-child(5n+3) {
  background: IndianRed;
}
div:nth-child(11n+5) {
  background: purple;
}
div:nth-child(13n+11) {
  background: green;
}
div:nth-child(17n+13) {
  background: gray;
}
                                                

Using the original prime number plus a new prime number makes it that much better. The initial set of nth-child’s are overwritten by the following and this makes for patterns that will rarely repeat. Here’s an example of what it looks like with 45 rows.