CSS :nth-child 선택자 (n부터 n까지 등 다양한 선택 방법)
여러개의 <li> 요소들이 있는 경우에 클래스명을 사용해서 원하는 리스트만 선택 후 CSS 스타일을 적용시킬 수 있지만 nth-child를 사용하면 규칙적이면서도 원하는 위치의 리스트를 꽤 손쉽게 선택할 수 있습니다. 굳이 클래스명을 부여하지 않아도 말이지요. 아래의 리스트가 있다고 가정해 보겠습니다.
예시
<body>
<div class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
</div>
</body>li 안에는 숫자를 마크업 했습니다. 이제부터 nht-child를 사용하여 다양하게 선택해 보겠습니다.
:nth-child(숫자)
숫자는 양수를 입력합니다. 만약 괄호 안에 5를 입력하면 어떨까요? 그러면 nth-child(5)가 될 것입니다. 이 뜻은 다섯번째 li를 선택하겠다는 의미입니다. 다섯번째 li의 글씨 색상을 빨간색으로 변경하려면 이렇게 하면 될 것입니다.
li:nth-child(5) {
color: red;
}이렇게 마크업하면 다섯번째 <li>안에 들어있는 텍스트는 빨간색으로 적용됩니다.
:nth-child(-n+숫자)
n 앞에 마이너스가 마크업 되면 ~까지라는 의미로 이해하시면 됩니다. 만약 숫자 부분에 3을 입력한다면 3번째 li 까지라는 뜻이 됩니다. 3번째 리스트까지 백그라운드 색상을 콘플라워블루로 적용시킨다면 이렇게 작성하면 될 것입니다.
li:nth-child(-n+3) {
background-color: cornflowerblue;
}그러면 첫번째 li부터 세번째 li까지 백그라운드 색상이 conflowerblue로 적용됩니다.
:nth-child(n+숫자)
방금 설명드린 방법과의 차이점이라고 한다면 n 앞에 마이너스가 없다는 것 뿐입니다. 그렇다면 반대의 개념으로 이해하면 되겠죠? 따라서 숫자 부분에 12를 입력한다면 12번째 li 요소부터 이후의 모든 li 태그를 선택한다는 의미입니다. 백그라운드 색상을 노란색으로 적용시키려 한다면 이렇게 구성하면 될 것입니다.
li:nth-child(n+12) {
background-color: yellow;
}그러면 12, 13, 14, 15번 숫자의 배경색이 노란색으로 적용됩니다.
:nth-child(n+숫자):nth-child(-n+숫자)
이건 응용편입니다. 방금 위의 두 가지를 합친 의미입니다. 즉 ~부터 ~까지라는 뜻이 됩니다. 숫자 부분에 각각 7과 10을 입력한다면 7번부터 10번까지라는 의미가 되는 것입니다. 텍스트 색상을 금색으로 적용시킨다면 이렇게 마크업하면 됩니다.
li:nth-child(n+7):nth-child(-n+10){
color: goldenrod;
}이렇게하면 7, 8, 9, 10의 텍스트는 금색으로 적용됩니다.
결과 확인
위에서 설명하고 예시로 작성한 CSS 코드들에 대한 결과 화면을 보시겠습니다.
See the Pen CSS nth-child 다양한 선택 방법1 by rgy0409 (@rgy0409) on CodePen.
설명드린대로 정상적으로 적용된 모습입니다. 그밖에 두 가지의 nth-child 선택 방법이 더 있습니다.
:nth-child(숫자n)
입력한 숫자의 배수로 선택합니다. 2를 입력하면 2의 배수에 따라 선택됩니다. 3을 입력하면 3의 배수마다 선택하는 것이구요.
:nth-child(even) 그리고 :nth-child(odd)
even은 짝수, odd는 홀수를 의미합니다. 즉 even 입력 시 2n처럼 선택되어질 것입니다. 끝.
