DEV Community

Rach Smith
Rach Smith

Posted on • Originally published at rachsmith.com on

Create a rainbow-coloured list with :nth-of-type()

This is my favourite thing to do with the :nth-of-type() selector:

First, you need some colour values. I like to store them in CSS custom properties so it easy to order them the way you like later.

:root {
  --red: #f21332;
  --orange: #f27225;
  --pink: #e20b88;
  --yellow: #f2ad24;
  --green: #00b249;
  --blue: #1844b5;
  --purple: #a033b3;
}

Enter fullscreen mode Exit fullscreen mode

Then you want to add an :nth-of-type declaration for each colour. The functional notation for each :nth-of-type is in the format of An+B, where A is the total number of colours you have, and B is the position of each colour. So as I have 7 colours, my functions look like 7n+1, 7n+2, 7n+3 and so on...

li:nth-of-type(7n + 1) {
  color: var(--red);
}

li:nth-of-type(7n + 2) {
  color: var(--orange);
}

li:nth-of-type(7n + 3) {
  color: var(--pink);
}

li:nth-of-type(7n + 4) {
  color: var(--yellow);
}

li:nth-of-type(7n + 5) {
  color: var(--green);
}

li:nth-of-type(7n + 6) {
  color: var(--blue);
}

li:nth-of-type(7n + 7) {
  color: var(--purple);
}

Enter fullscreen mode Exit fullscreen mode

You can never have too many rainbows.

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more