CSS) nth-child, nth-of-type 다양한 활용방법

CSS에서 nth-child를 사용하면 쉽게 n번째 요소를 선택 가능하다.

li:nth-child(2) { 
  color: lime;
}

/* 4,8,12,16 ... */
div:nth-child(4n) {
  color: lime;
}

 

선착순 1등, 2등, 3등에 아이콘을 넣고자 할때

꼭 아래 코드처럼 li가 아니어도된다. div등의 요소도 당연히 선택할 수 있다.

li:nth-child(1):before { 
  background:url('이미지 주소1 - hi098123');
}
li:nth-child(2):before { 
  background:url('이미지 주소2 - hi098123');
}
li:nth-child(3):before { 
  background:url('이미지 주소3 - hi098123');
}

JS로 처리하지 않아도 되는 항목입니다.

 

 

CSS로 홀수 선택, 짝수 선택하기

tr:nth-child(odd) 또는 tr:nth-child(2n+1)
/* HTML 표의 홀수번째 행을 나타냅니다. */

tr:nth-child(even) 또는 tr:nth-child(2n)
/* HTML 표의 짝수번째 행을 나타냅니다. */

An+B로 등차수열으로 선택할 수 있습니다.

odd, even으로 홀,짝을 선택할 수 있습니다.

 

보통 table같은데서 색상 구분하여 줄을 구분하는데 js로 class="odd", class="even" 으로 설정해서 처리하지만, CSS로 처리가 가능합니다.

 

 

잘 안쓰이나, 명시도(CSS 우선순위) 높이는 방법

p:nth-child(n)

코드 예시

<div>
	<p>aa</p>
	<p>bb</p>
	<p>cc</p>
	<p>hi098123</p>
	<p>11</p>
	<p>22</p>
	<p>33</p>
</div>
<style>
	div>p:nth-child(n){color:blue}
	div>p{color:red}
</style>

결과는 색상이 파란색으로 나온다.

 

 

CSS로 A부터 B까지 선택하기

p:nth-child(n+8):nth-child(-n+15)

이렇게 p태그를 8번부터 ~ 15번 까지를 선택할 수 있습니다.

 

이것도 보통 자바스크립트에서 처리했을건데 CSS로 처리시 속도가 매우 향상됩니다.

 

 

:nth-child, :nth-of-type 차이 알아보기

차이는 처음에 구분하기 어려울 수 있습니다.

 

nth-child는 <선택자>:nth-child(3)이라고 할때

<선택자>의 형제중 3번째

 

nth-of-type는 <선택자>:nth-of-type(3)이라고 할때

<선택자>의 같은 선택자의 형제중 3번째

 

아래 예시로 보면 구분이 될겁니다.

<div class="hi098123">
    <p>hi098123 p태그 1</p>
    <span>hi098123 span태그 1</span>
    <p>hi098123 p태그 2</p>
    <span>hi098123 span태그 2</span>
    <p>hi098123 p태그 3</p>
</div>

 

.hi098123 p:nth-child(3){color:blue}

hi098123 p태그 1
hi098123 span태그 1
hi098123 p태그 2
hi098123 span태그 2
hi098123 p태그 3

p태그1(1번)으로부터 세서 세번째인 "hi098123 p태그 2"가 선택되었습니다.

주의: ':nth-child' 는 같은 태그인 p만 선택가능합니다.
여기에서는 1, 3, 5 만 가능

 

.hi098123 p:nth-of-type(2){color:blue}

hi098123 p태그 1
hi098123 span태그 1
hi098123 p태그 2
hi098123 span태그 2
hi098123 p태그 3

p태그1(1번)으로부터 세서 두번째 p태그인 "hi098123 p태그 2"이 선택되었습니다.

 

 

:nth-last-child(), :nth-last-of-type()

:nth-child, :nth-of-type과 유사하게 동작하며, 뒤에서부터 순서대로 동작합니다.

 

예)

1. p:nth-last-child(1) 뒤에서 첫번째 p의 형제
2. p:nth-last-of-type(1) 뒤에서 첫번째 p의 형제중 p태그

 

 

추가로 있는 내용

• :first-child
• :first-of-type
• :last-child
• :last-of-type

:first-child 는 :nth-child(1) 과 동일

:first-of-type 은 :nth-of-type(1) 과 동일

:last-child 는 :nth-last-child(1) 과 동일

:last-of-type 은 :nth-last-of-type(1) 과 동일

 

 

브라우저 지원

• IE9 이상

IE9이상이면 대부분의 브라우저라고 봐도 무방하다.

보편적으로 쓸수있으나 잘 몰라서 안쓰이는것 같아 글로 각종 예시를 정리해보았습니다.