CSS3 nth-child 요소 개별적용

정렬된 요소의 css에서 개별 정의가 가능한 nth-child 입니다.

특정 순서에 따른 정의가 가능하며 여러가지 방법을 통하여 각 요소마다 개별적으로 정의가 가능합니다.

1. nth-child(숫자)로 순서 정의를 내립니다.

html

<ul>
    <li>nth-child(1)</li>
    <li>nth-child(2)</li>
    <li>nth-child(3)</li>
    <li>nth-child(4)</li>
    <li>nth-child(5)</li>
</ul>

css

li:nth-child(1) {background:#FFF}
li:nth-child(2) {background:#F00}
li:nth-child(3) {background:#00F}
li:nth-child(4) {background:#FF0}
li:nth-child(5) {background:#0F0}

• nth-child(1)
• nth-child(2)
• nth-child(3)
• nth-child(4)
• nth-child(5)

위와 같이 개별 li 요소마다 css를 적용할 수 있습니다.

2. nth-child(odd,even)로 순서 정의를 내립니다.

css

li:nth-child(odd) {background:#FF0}
li:nth-child(even) {background:#0F0}

• 예제텍스트
• 예제텍스트
• 예제텍스트
• 예제텍스트
• 예제텍스트

odd는 홀수, even은 짝수 순으로 정의를 내려 리스트 순으로 해당 css를 입혀줍니다.

3. nth-child(?n+?)로 순서 정의를 내립니다.

배열을 사용할때 사용합니다. 4개의 이미지 목록에서 4번째의 css에 해당 css를 적용합니다.

html

<ul>
    <li>이미지</li>
    <li>이미지</li>
    <li>이미지</li>
    <li>이미지</li>
</ul>

css

li {width:24%; height:140px; margin-right:1.333%; background:#F63; float:left}
li:nth-child(4n+4) {margin-right:0;}

• img
• img
• img
• Img

갤러리 게시판 사용시 각 마진의 간격을 넣다가 보면 제일 끝부분 이미지가 아래로 떨어지거나 딱 맞추었다고 해도 레이아웃에 딱 맞지 않는 마진을 볼 수 있습니다. 하지만 nth-child(4n+4)를 통하여 해당 마지막 li의 마진을 제거하여 레이아웃에 정확히 맞출 수 있습니다.

(4n+?)를 잘 사용하면 특정 부분에 css를 입힐 수 있습니다. 보통 db에서 불러오는 게시물들을 따로 class를 줄 수 없기에 이 속성은 굉장히 중요한 요소가 될 수밖에 없습니다.

nth-child 외에 첫번째나 마지막에만 사용하려면 first-child, last-child 만 사용하셔도 같은 방법으로 적용이 됩니다.

first-child는 첫번째 시작하는 해당 요소에 적용.

last-child는 마지막 해당 요소에 적용합니다.

이와같은 CSS로 각 요소들에 class를 적용하는 일이 없도록 합시다.