c CSS

[selector] CSS - :nth-child(n) 가상선택자 ★ - 그 부모의 n번째 자식요소 (=nth-child선택자 = 엔스차일드 선택자) ※ 순서선택자/순번선택자/서수선택자 ※ 등차수열 공식

9,197

:nth-child(n) 예제 - 그 부모의 n번째 자식요소 선택

:nth-child(n) 정의

:nth-child(n) 예제 - n번째 요소가 지정요소 아니라서 적용 X

등차수열 공식 (= 매개변수 n 계산식)

:nth-child(n) 예제 - 두 class 모두 있는 요소 경우

:nth-child(n) 예제 - 그 부모의 n번째 자식요소 선택

<style>

p:nth-child(2) {background: yellow;}

</style>

<div>

<p>홈짱닷컴</p>

<p>Homzzang.com</p>

<span>Since 2012</span>

<p>홈페이지 제작관리</p>

<p>서버관리 코딩언어</p>

</div>

결과보기

:nth-child(n) 정의

지정요소가 그 부모의 n번째 자식요소 선택.

PS.

n은 1부터 시작.

n 자리엔 정수 뿐만 아니라, 등차수열 연산식도 가능.

1.

n번째 요소가 지정요소 아닌 경우 적용 X

(아래예제) p:nth-child(3) 경우, 적용 X

2.

IE9 이상 주요 최신 브라우저 모두 지원.

PS.

jQuery :nth-child(n) 선택자

:nth-child(n) 예제 - n번째 요소가 지정요소 아니라서 적용 X

<style>

p:nth-child(3) {background: yellow;}

</style>

<div>

<p>홈짱닷컴</p>

<p>Homzzang.com</p>

<span>Since 2012</span>

<p>홈페이지 제작관리</p>

<p>서버관리 코딩언어</p>

</div>

결과보기

등차수열 공식 (= 매개변수 n 계산식)

a+b(n−1) = bn + a-b

a : 시작값

b : 각 값의 차이

[3열 경우]

1 / 2 / 3

4 / 5 / 6

7 / 8 / 9

...

1, 4, 7 ... (3열의 왼쪽 열)

3열의 1번째 열 공식 = 1 + 3(n-1) = 3n - 2

2, 5, 8 ...(3열의 중앙 열)

3열의 2번째 열 공식 = 2 + 3(n-1) = 3n - 1

3, 6, 9 ... (3열의 우측 열)

3열의 3열 공식 = 3 + 3(n-1) = 3n

[4열 경우]

1 / 2 / 3 / 4

5 / 6 / 7 / 8

9 / 10 / 11 / 12

...

1, 5, 9 ... (4열의 1번째 열)

4열의 1번째 열 공식 = 1 + 4(n-1) = 4n - 3

2, 6, 10 ... (4열의 2번째 열)

4열의 2번째 열 공식 = 2 + 4(n-1) = 4n - 2

3, 7, 11 ... (4열의 3번째 열)

4열의 3번째 열 공식 = 3 + 4(n-1) = 4n - 1

4, 8, 12 ... (4열의 3번째 열)

4열의 4번째 열 공식 = 4 + 4(n-1) = 4n

:nth-child(n) 예제 - 두 class 모두 있는 요소 경우

<style>

#hz>.a.b:nth-child(3){

color:red;

}

</style>

<div id="hz">

<div class="a b">홈</div>

<div class="a b">짱</div>

<div class="a b">닷</div>

<div class="a c">컴</div>

</div>

결과보기