목차
- :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
[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
