See the Pen :nth-child(n) by nilgi (@nilgi) on CodePen.
<h1>:nth-child(n)</h1>
<p>n번째 자식요소 선택. n은 숫자, 홀수(odd), 짝수(even), 수식 가능</p>
<style>
.nc1 p:nth-child(4) {
color: red;
font-weight: bold;
}
.nc2 div:nth-child(odd) {
background: gold;
}
.nc2 div:nth-child(even) {
background: gray;
}
.nc3 p:nth-child(3n) {
color: blue;
font-size: 24px;
font-weight: bold;
}
.nlc1 p:nth-last-child(2) {
background: #333;
color: white;
}
</style>
<h2>:nth-child(n)</h2>
<div class="nc1">
<p>1번째 자식요소</p>
<p>2번째 자식요소</p>
<p>3번째 자식요소</p>
<p>4번째 자식요소</p>
<p>5번째 자식요소</p>
</div>
<h2>:nth-child(홀수 or 짝수)</h2>
<div class="nc2">
<div>홀수 칸</div>
<div>짝수 칸</div>
<div>홀수 칸</div>
<div>짝수 칸</div>
<div>홀수 칸</div>
<div>짝수 칸</div>
</div>
<h2>:nth-child(수식)</h2>
<div class="nc3">
<p>1번</p>
<p>2번</p>
<p>3번</p>
<p>4번</p>
<p>5번</p>
<p>6번</p>
<p>7번</p>
<p>8번</p>
<p>9번</p>
<p>10번</p>
</div>
<h1>:nth-last-child(n)</h1>
<p>뒤에서부터 n번째 자식요소 선택. n은 홀수, 짝수, 수식 가능</p>
<div class="nlc1">
<p>1번째 요소</p>
<p>2번째 요소</p>
<p>3번째 요소</p>
<p>4번째 요소</p>
<p>5번째 요소</p>
</div>