JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div>
    <h1>Exemple 1 :</h1>
    <ul class="ex1">
      <li>en-tête</li>
      <li>rouge</li>
      <li>vert</li>
      <li>bleu</li>
      <li>jaune</li>
    </ul>
  </div>
  <div>
    <h1>Exemple 2 :</h1>
    <ul class="ex2">
      <li>en-tête</li>
      <li>élément 1</li>
      <li>élément 2</li>
      <li>élément 3</li>
      <li>élément 4</li>
      <li>élément 5</li>
      <li>élément 6</li>
    </ul>
  </div>
</body>

CSS

li {
  list-style-position: inside;
}
li:first-child {
  background-color: #333333;
  color: #FFFFFF;
  font-weight: bold;
}

/* Exemple 1 */
ul.ex1 li:nth-child(2) {
  background-color: red;
}
ul.ex1 li:nth-child(3) {
  background-color: green;
}
ul.ex1 li:nth-child(4) {
  background-color: blue;
}
ul.ex1 li:nth-child(5) {
  background-color: yellow;
}

/* Exemple 2 */
ul.ex2 li:nth-child(2n) {
  background-color: #AABBFF;
}
ul.ex2 li:nth-child(2n+3) {
  background-color: #CCCCFF;
}