<p>nth-child</p>
<ul class="sample1">
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
</ul>

<p>nth-of-type</p>
<ul class="sample2">
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
</ul>
/* nth-childの設定 */
.sample1 li:nth-child(1){
  color:#f00;
}
.sample1 li:nth-child(2){
  color:#0f0;
}
.sample1 li:nth-child(3){
  color:#00f;
}

/* nth-of-typeの設定 */
.sample2 li:nth-of-type(1){
  color:#f00;
}
.sample2 li:nth-of-type(2){
  color:#0f0;
}
.sample2 li:nth-of-type(3){
  color:#00f;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.