웹 문서에서 특정 부분에 스타일을 적용하려면 보통 class나 id 선택자를 이용해 이름을 붙여 주고 그 클래스아 id에 대한 스타일을 정의하면 됩니다. 하지만 여러 개의 항목이 일렬(가로나 세로)로 나열되 있는 경우, class나 id를 사용하지 않고 nth-child(n)이나 nth-last-child(n)을 사용하면 스타일을 지정할 항목이 몇 번째에 있는지를 따져 스타일을 적용할수 있습니다.
목차
:nth-child(n)
:nth-child()는 자식 요소 중에서 n 번째에 있는 모든 자식 요소를 선택할 때 사용합니다.
기본형
:nth-child( an+b )
- a와 b는 정수입니다. 0과 음수도 가능합니다.
- n에는 음이 아닌 정수, 즉 0, 1, 2, 3, …이 차례대로 대입됩니다.
- an+b 대신에 even, odd를 넣을 수도 있습니다.
- odd을 쓰면 홀수번째 요소가 선택됩니다.
- even을 적으면 짝수번째 요소가 선택됩니다.
예제 1
- n에 0, 1, 2, 3, …을 대입하면 3n+2은 2, 5, 8, 11, …이 됩니다.
- 선택된
<li>요소들을 빨간색으로 만듭니다.
<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>
</ul>
li:nth-child( 3n+2 ) {
color: red;
}
예제 2
- a를 음수로 정하면 선택하는 요소의 개수를 정할 수 있습니다.
- -2n+5이면 n이 0일 때 5, n이 1일 때 3, n이 2일 때 1이므로 세 개의 홀수번째 요소가 선택됩니다.
li:nth-child( -2n+5 ) {
color: red;
}
예제 3
- a가 0이면 n에 어떤 값이 들어가도 b입니다. 0n+b라고 해도 되고, 그냥 b만 써도 됩니다.
- 아래와 같이 하면 5번째 요소가 선택됩니다.
li:nth-child( 5 ) {
color: red;
}
nth-last-child(n)
:nth-last-child()는 자식 요소 중에서 n 번째에 있는 모든 자식 요소를 선택할 때 사용합니다. :nth-child()와 다른 점은 뒤에서 부터 센다는 것입니다.
기본형
:nth-last-child( an+ b )
- a와 b는 정수입니다. 0과 음수도 가능합니다.
- n에는 음이 아닌 정수, 즉 0, 1, 2, 3, …이 차례대로 대입됩니다.
- an+b 대신에 even, odd를 넣을 수도 있습니다.
- odd을 쓰면 홀수번째 요소가 선택됩니다.
- even을 적으면 짝수번째 요소가 선택됩니다.
예제 1
-
<li>요소 중 뒤에서부터 3번째에 있는 것을 선택하고 빨간색으로 만듭니다.
<ul>
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
li:nth-last-child( 3 ) {
color: red;
}
예제 2
- n에 0, 1, 2, 3, …을 대입하면 2n은 0, 2, 4, 6, …이 됩니다.
-
<li>요소 중 뒤에서부터 그 순서에 있는 것을 선택하고 빨간색으로 만듭니다.
li:nth-last-child( 2n ) {
color: red;
}
예제 3
- n에 0, 1, 2, 3, …을 대입하면 3n-1은 -1, 2, 5, 8, …이 됩니다.
-
<li>요소 중 뒤에서부터 그 순서에 있는 것을 선택하고 빨간색으로 만듭니다.
li:nth-last-child( 3n - 1 ) {
color: red;
}
예제 4
- n에 0, 1, 2, 3, …을 대입하면 n+8은 8, 9, 10, …이 됩니다.
-
<li>요소 중 뒤에서부터 그 순서에 있는 것을 선택하고 빨간색으로 만듭니다.
li:nth-last-child( n + 8 ) {
color: red;
}
:nth-of-type(n)
:nth-of-type()는 자식 요소 중에서 n 번째에 있는 특정 자식 요소를 선택할 때 사용합니다.
li:nth-of-type(4)
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
:nth-last-of-type(n)
:nth-last-of-type()는 자식 요소 중에서 n 번째에 있는 특정 자식 요소를 선택할 때 사용합니다. :nth-of-type()와 다른점은 뒤에서 부터 센다는 것입니다.
li:nth-last-of-type(4)
<ul>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
:first-child
자식 요소 중 첫번째 요소를 선택합니다.
li:first-child
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
:last-child
자식 요소 중 마지막 요소를 선택합니다.
li:last-child
<ul>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
:first-of-type
형제 요소 중 첫 번째 요소를 선택합니다.
li:first-of-type
<div>
<ul>
... ...
... ...
</ul>
<p>Lorem</p>
<p>Ipsum</p>
<p>Dolor</p>
</ul>
:last-of-type
형제 요소 중 마지막 요소를 선택합니다.
li:last-of-type
<div>
<ul>
... ...
... ...
</ul>
<p>Lorem</p>
<p>Ipsum</p>
<p>Dolor</p>
</ul>
:only-child
부모요소 안의 자식 요소가 유일하게 하나일 때 스타일을 지정합니다.
p:last-of-type
<p> 요소가 여러개이면 선택되지 않습니다.
<div>
<p>Lorem</p>
<p>Ipsum</p>
<p>Dolor</p>
</div>
다른 자식 요소가 있으면 안됩니다.
예를 들면
<div>
<p>Lorem</p>
</div>
일 때는 <p> 요소를 선택하지만,
<div>
<p>Lorem</p>
<ul>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</div>
다른 자식 요소가 있으면 선택되지 않습니다.
:only-of-type
:only-child와 비슷한데 해당 요소가 유일한 요소일 때 스타일을 지정합니다.
p:only-of-type
<p> 요소가 여러개이면 선택되지 않습니다.
<div>
<p>Lorem</p>
<p>Ipsum</p>
<p>Dolor</p>
</div>
다른 자식 요소가 있어도 됩니다.
예를 들면
<div>
<p>Lorem</p>
</div>
일 때도 <p> 요소를 선택하고,
<div>
<p>Lorem</p>
<ul>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</div>
일 때도 <p> 요소를 선택합니다.