JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<p>nth-of-type의 사용예</p>
<div class="exem01">
  <h2>heading1</h2>
  <p>탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다.</p>
  <h2>heading2</h2>
   <p>탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다.</p>
   <h2>heading3</h2>
  <p>탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다.</p>
</div>

<p>nth-child의 사용예</p>
<div class="exem02">
  <h2>heading1</h2>
  <h2>heading2</h2>
  <h2>heading3</h2>
  <h2>heading4</h2>
</div>

CSS

.exem01, .exem02 {border:2px solid #333333;}

.exem01 h2:nth-of-type(2) {
  color:#ff6600;
}

.exem02 h2:nth-child(2) {
  color:#ff6600;
}