오늘은 nth-of-type() 속성에 대해서 알아보려고 한다 :)
:nth-of-type() CSS 는 동일한 유형(태그 이름)의 형제 간의 위치를 기반으로 요소를 찾는다.
nth-of-type()는 일치하는 요소의 패턴을 나타내는 단일 인수로 지정된다.
:nth-of-type( <nth> )
where
<nth> = <an-plus-b> | even | odd
<div>
<div>This element isn't counted.</div>
<p>1st paragraph.</p>
<p class="fancy">2nd paragraph.</p>
<div>This element isn't counted.</div>
<p class="fancy">3rd paragraph.</p>
<p>4th paragraph.</p>
</div>
/* Odd paragraphs (홀수) */
p:nth-of-type(2n+1) {
color: red;
}
/* Even paragraphs (짝수) */
p:nth-of-type(2n) {
color: blue;
}
/* First paragraph */
p:nth-of-type(1) {
font-weight: bold;
}
/* This will match the 3rd paragraph as it will match elements which are 2n+1 AND have a class of fancy.
The second paragraph has a class of fancy but is not matched as it is not :nth-of-type(2n+1) */
p.fancy:nth-of-type(2n+1) {
text-decoration: underline;
}
이 두 속성은 해당하는 태그에서 원하는 순번에 해당하는 태그만 속성을 지정할 수 있다는 장점을 가지고 있다. nth-child와 nth-of-type의 가장 큰 차이점은 바로 해당하는 태그의 순서를 말하는지 아니면 부모 속성에서 특정 태그를 가진 자식 속성에서 몇번째 해당하는지의 차이라고 보면된다.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
https://webisfree.com/2015-12-16/[css]-nth-child%EC%99%80-nth-of-type-%EC%84%A0%ED%83%9D%EC%9E%90-%EB%B9%84%EA%B5%90%ED%95%98%EA%B8%B0
https://www.w3schools.com/cssref/sel_nth-of-type.asp
https://firerope.tistory.com/5