목차
- :nth-of-type(n) 예제 - 그 부모의 자식 중 P타입 3번째
- :nth-of-type(n) 정의
- :nth-of-type(n) 구문
- :nth-of-type(n) 예제 - 선택자타입 미지정 경우
- :nth-of-type(n) 예제 - even/odd 경우
- :nth-of-type(n) 예제 - an+b 수식 경우
- :nth-of-type(n) 예제 - 다른 선택자와 결합해 더 구체화
:nth-of-type(n) 예제 - 그 부모의 자식 중 P타입 3번째
<style>
p:nth-of-type(3) {background: yellow;}
</style>
<div>
<p>홈짱닷컴</p>
<p>Homzzang.com</p>
<span>Since 2012</span>
<p>홈페이지 제작관리</p>
<p>서버관리 코딩언어</p>
</div>
결과보기
※ n은 1부터 시작.
※ <span>은 <p> 요소가 아니므로 순서에서 제외.
:nth-of-type(n) 정의
그 부모의 자식 중 지정선택자 타입 n번째 자식요소 선택.
지정선택자 타입 미지정 시, 그냥 n번째 자식요소 선택됨.
1.
- 타입 다른 요소는 순서에서 배제.
- n은 1부터 시작.
2.
IE9 이상 주요 최신브라우저 지원.
3. MDN :nth-of-type() 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
:nth-of-type(n) 구문
selectortype:nth-of-type(n) { css declarations; }
[매개변수]
selectortype
그 부모의 자식 중 지정선택자타입만 선택.
- 미지정 시 타입 상관없이 n번째 순번만 고려.
n
지정선택자타입 중 n번째 순번에 해당하는 요소 선택. (가능값 종류)
- number : 지정숫자번째만 (※ number는 1부터 시작)
- an + b 수식형태의 등차수열 (※ n은 1부터 시작)
- even : 짝수번째
- odd : 홀수번째
:nth-of-type(n) 예제 - 선택자타입 미지정 경우
/* div 중 2번째 */
div:nth-of-type(2) {
background: red;
}
/* li 중 2번째 */
li:nth-of-type(2) {
background: blue;
}
/* 무조건 3번째 */
:nth-of-type(3) {
background: yellow;
}
</style>
<body>
<div>
1. <p>홈짱닷컴</p>
</div>
<div>
2. <p>Homzzang.com</p>
</div>
<div>
3. <p>홈페이지 제작관리 강의</p>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>BootStrap</li>
</ol>
</body>
결과보기
:nth-of-type(n) 예제 - even/odd 경우
<style>
p:nth-of-type(odd) { background: red;}
p:nth-of-type(even) { background: blue;}
div {border:3px solid red; padding:5px;}
</style>
<body>
<p>홈짱닷컴</p>
<p>Homzzang.com</p>
<p>홈페이지 제작관리 강의</p>
<div><p>HTML</p><p>CSS</p><p>JavaScript<p></div>
</body>
결과보기
:nth-of-type(n) 예제 - an+b 수식 경우
3n + 0 경우
<style>
li:nth-of-type(3n+0) {background: yellow;}
</style>
<ol>
<li>홈짱닷컴</li>
<li>Homzzang.com</li>
<li>홈페이지 제작관리 강의</li>
<li>서버관리 강의</li>
<li>그누보드 강의</li>
<li>영카트 강의</li>
<li>배추빌더 강의</li>
<li>아미나빌더 강의</li>
<li>나리야빌더 강의</li>
</ol>
결과보기
3n-1 경우
<style>
li:nth-of-type(3n-1) {background: yellow;}
</style>
<ol>
<li>홈짱닷컴</li>
<li>Homzzang.com</li>
<li>홈페이지 제작관리 강의</li>
<li>서버관리 강의</li>
<li>그누보드 강의</li>
<li>영카트 강의</li>
<li>배추빌더 강의</li>
<li>아미나빌더 강의</li>
<li>나리야빌더 강의</li>
</ol>
결과보기
:nth-of-type(n) 예제 - 다른 선택자와 결합해 더 구체화
※ ol 자손요소의 li타입 중 그 부모의 각 3번째 li
<style>
ol li:nth-of-type(3) {background: yellow;}
</style>
<ol>
<li>홈짱닷컴</li>
<li>Homzzang.com</li>
<li>홈페이지 제작관리 강의</li>
<li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
</ol>
<ul>
<li>홈짱닷컴</li>
<li>Homzzang.com</li>
<li>그누보드/영카트 강의</li>
</ul>
결과보기
