JSFiddle - React, Tailwind, and code Playground

by kon_yu

HTML

<p>偶数要素の文字色を赤にする0からカウントされる</p>
<ul>
  <li class='list'>0</li>
  <li class='list'>1</li>
  <li class='list'>2</li>
  <li class='list'>3</li>
</ul>

<p>1番目の要素のクラスを別のものにしても、兄弟要素の数は変わらないので２番目の要素に.list:nth-child(even)が適用される</p>
<ul>
  <li class='list2'>0</li>
  <li class='list'>1</li>
  <li class='list'>2</li>
  <li class='list'>3</li>
</ul>

CSS

.list {
  color: blue;
}

.list:nth-child(even) {
  color: red;
}

.list2 {
  color: aqua;
}