Given: a simple array of colourful highlights, controlled in CSS only.
Is there any way, to shorten the following huge block of CSS code, while keeping the same outcome?
In other words is there a way to get rid of the amount of repeatability in the code, using only CSS, when selecting multiple nth-of-type declarations?
//CSS
nav:hover mark:nth-of-type(01){background:linear-gradient(to left, transparent, rgb(192 0 192 / 1))}
nav:hover mark:nth-of-type(02){background:linear-gradient(to left, transparent, rgb(180 0 250 / 1))}
nav:hover mark:nth-of-type(03){background:linear-gradient(to left, transparent, rgb(220 0 250 / 1))}
nav:hover mark:nth-of-type(04){background:linear-gradient(to left, transparent, rgb(220 0 120 / 1))}
nav:hover mark:nth-of-type(05){background:linear-gradient(to left, transparent, rgb(210 0 130 / 1))}
nav:hover mark:nth-of-type(06){background:linear-gradient(to left, transparent, rgb(202 184 0 / 1))}
nav:hover mark:nth-of-type(07){background:linear-gradient(to left, transparent, rgb(230 196 0 / 1))}
nav:hover mark:nth-of-type(08){background:linear-gradient(to left, transparent, rgb(145 190 0 / 1))}
nav:hover mark:nth-of-type(09){background:linear-gradient(to left, transparent, rgb(135 182 0 / 1))}
nav:hover mark:nth-of-type(10){background:linear-gradient(to left, transparent, rgb(0 204 227 / 1))}
nav:hover mark:nth-of-type(11){background:linear-gradient(to left, transparent, rgb(0 187 253 / 1))}
nav:hover mark:nth-of-type(12){background:linear-gradient(to left, transparent, rgb(0 192 212 / 1))}
nav:hover mark:nth-of-type(13){background:linear-gradient(to left, transparent, rgb(0 167 255 / 1))}
nav:hover mark:nth-of-type(14){background:linear-gradient(to left, transparent, rgb(0 165 150 / 1))}
nav:hover mark:nth-of-type(15){background:linear-gradient(to left, transparent, rgb(12 156 23 / 1))}
nav:hover mark:nth-of-type(16){background:linear-gradient(to left, transparent, rgb(16 20 162 / 1))}
```
For pure CSS you'll still need quite a bit of repetition but this is a bit more readable, using a CSS variable:
nav mark:nth-of-type(01){--c: rgb(192 0 192 / 1)}
nav mark:nth-of-type(02){--c: rgb(180 0 250 / 1)}
nav mark:nth-of-type(03){--c: rgb(220 0 250 / 1)}
nav mark:nth-of-type(04){--c: rgb(220 0 120 / 1)}
nav mark:nth-of-type(05){--c: rgb(210 0 130 / 1)}
nav mark:nth-of-type(06){--c: rgb(202 184 0 / 1)}
nav mark:nth-of-type(07){--c: rgb(230 196 0 / 1)}
nav mark:nth-of-type(08){--c: rgb(145 190 0 / 1)}
nav mark:nth-of-type(09){--c: rgb(135 182 0 / 1)}
nav mark:nth-of-type(10){--c: rgb(0 204 227 / 1)}
nav mark:nth-of-type(11){--c: rgb(0 187 253 / 1)}
nav mark:nth-of-type(12){--c: rgb(0 192 212 / 1)}
nav mark:nth-of-type(13){--c: rgb(0 167 255 / 1)}
nav mark:nth-of-type(14){--c: rgb(0 165 150 / 1)}
nav mark:nth-of-type(15){--c: rgb(12 156 23 / 1)}
nav mark:nth-of-type(16){--c: rgb(16 20 162 / 1)}
nav:hover mark:nth-of-type(n){background:linear-gradient(to left, transparent, var(--c))}