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

1. :nth-child(n) 예제 - 그 부모의 n번째 자식요소 선택
2. :nth-child(n) 정의
3. :nth-child(n) 예제 - n번째 요소가 지정요소 아니라서 적용 X
4. 등차수열 공식 (= 매개변수 n 계산식)
5. :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>

 

결과보기

[주의] :last-child 선택자나 :last-of-type 선택자 사용하면 적용 X

관련글: (210717) https://sir.kr/qa/422470