<ul class="nth-child-3n1">
  <li>1番目</li>
  <li>2番目</li>
  <li>3番目</li>
  <li>4番目</li>
  <li>5番目</li>
  <li>6番目</li>
</ul>

<ul class="nx">
  <li>1番目</li>
  <li>2番目</li>
  <li>3番目</li>
  <li>4番目</li>
  <li>5番目</li>
  <li>6番目</li>
</ul>

<ul class="minus-nx">
  <li>1番目</li>
  <li>2番目</li>
  <li>3番目</li>
  <li>4番目</li>
  <li>5番目</li>
  <li>6番目</li>
</ul>

<ul class="last-nx">
  <li>1番目</li>
  <li>2番目</li>
  <li>3番目</li>
  <li>4番目</li>
  <li>5番目</li>
  <li>6番目</li>
</ul>

<ul class="last-minus-nx">
  <li>1番目</li>
  <li>2番目</li>
  <li>3番目</li>
  <li>4番目</li>
  <li>5番目</li>
  <li>6番目</li>
</ul>
ul {
  padding: 0;
  list-style-position: inside;
}

.nth-child-3n1 {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 33.33%;
    &:nth-child(3n+1):after {
      content: '←3の倍数の次';
      color: green;
    }
  }
}

.nx {
  li:nth-child(n+4):after {
    content: '←前から4番目以降';
    color: red;
  }
}

.minus-nx {
  li:nth-child(-n+4):after {
    content: '←前から4番目まで';
    color: green;
  }
}

.last-nx {
  li:nth-last-child(n+4):after {
    content: '←後ろから4番目以前';
    color: red;
  }
}

.last-minus-nx {
  li:nth-last-child(-n+4):after {
    content: '←後ろから4番目まで';
    color: green;
  }
}
View Compiled
Rerun