Last Updated: May 24, 2017

Create an automatic sequential color with nth-child

Algorithm

Based on nb of color the sequence in a nth-selector could be generalised as nth-child({length}n-{color-index}). It also means that it could be automatically integrated into a sass loop as described below

Demo

$colors-list: red whitesmoke blue yellow orange green purple pink cyan chocolate;

@each $current-color in $colors-list {
 $i: index($colors-list, $current-color);
 li:nth-child(#{length($colors-list)}n+#{$i}) { 
 t: length($colors-list);
 color: $current-color;
 }
}

Result could be viewed on https://codepen.io/jfreyre/pen/MmLGMm