CSS3 :nth-child(n) 선택자 (같은종류의 태그로 구성되어 있을 때 사용)

CSS3에서는 :nth-child(n) 선택자를 사용하여 여러 개의 항목이 일렬로 나열되어 있는 경우,
class나 id를 사용하지 않고 스타일을 지정할 항목이 몇 번째에 있는지 따져서 스타일을 적용할 수 있습니다.

Markup

1. <ul class="list">
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. </ul>

 

1. 원하는 자식을 숫자로 선택할 수 있습니다.

---

 

· 다섯번째 글 선택하기

– 선택하고자 하는 종류의 tag 뒤에 ‘:nth-child( )‘ 라고 쓰고 괄호안에 ‘원하는 숫자‘를 써줍니다.

1. .list li:nth-child(5) {
2. background-color: #ffff00;
3. }

 

· 3의 배수로 선택하기

– 선택하고자 하는 종류의 tag 뒤에 ‘:nth-child( )‘ 라고 쓰고 괄호안에 ‘원하는 숫자 + n‘을 써줍니다.

1. .list li:nth-child(3n) {
2. background-color: #ffff00;
3. }

 

· 두번째 글 선택 후 3의 배수로 선택하기

1. .list li:nth-child(3n + 2) {
2. background-color: #ffff00;
3. }

 

 

2. 홀수와 짝수로 선택할 수 있습니다.

---

 

· 홀수 선택하기

– 선택하고자 하는 종류의 tag 뒤에 ‘:nth-child( )‘ 라고 쓰고 괄호안에 ‘odd‘라고 써줍니다.

1. .list li:nth-child(odd) {
2. background-color: #ffff00;
3. }

 

· 짝수 선택하기

– 선택하고자 하는 종류의 tag 뒤에 ‘:nth-child( )‘ 라고 쓰고 괄호안에 ‘even‘이라고 써줍니다.

1. .list li:nth-child(even) {
2. background-color: #ffff00;
3. }

 

 

3. 뒤에서부터 선택할 수 있습니다.

---

 

· 뒤에서 두번째 글(일곱번째 글) 선택하기

– 선택하고자 하는 종류의 tag 뒤에 ‘:nth-last-child( )‘ 라고 쓰고 괄호안에 ‘원하는 숫자‘를 써줍니다.

1. .list li:nth-last-child(2) {
2. background-color: #ffff00;
3. }

 

· 뒤에서 첫번째 글 선택 후 3배수로 선택하기

1. .list li:nth-last-child(3n + 1) {
2. background-color: #ffff00;
3. }

출처 : http://mylife365.tistory.com/252