CSS :nth-child advanced pattern

by mzilverberg

HTML

<ol>
  <li>Yellow</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Red</li>
  <li>Yellow</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Red</li>
  <li>Yellow</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Red</li>
  <li>Yellow</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Red</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Blue</li>
  <li>Yellow</li>
  <li>Red</li>
  <li>Yellow</li>
  <li>Red</li>
  <!--<li>Blue</li>--> 
</ol>

SCSS

ol {
  li {
    
    // Supports pattern up to 38 items
    &,
    &:nth-child(2n + 6),
    &:nth-child(2n + 15):nth-child(-n + 19),
    &:nth-child(2n + 24):nth-child(-n + 28),
    &:nth-child(2n + 33):nth-child(-n + 37) {
      background: yellow;
    }
    
    &:nth-child(2n + 3),
    &:nth-child(2n + 12):nth-child(-n + 16),
    &:nth-child(2n + 21):nth-child(-n + 25),
    &:nth-child(2n + 30):nth-child(-n + 34) {
      background: blue;
    }
    
    &:nth-child(2n + 2):nth-child(-n + 4),
    &:nth-child(2n + 9),
    &:nth-child(2n + 18) {
      background: red;
    }
  }
}