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;
}
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);
}
You can never have too many rainbows.
Top comments (0)