nth-child vs nth-of-type
참고:
https://www.digitalocean.com/community/tutorials/css-css-nth-child-vs-nth-of-type
https://css-tricks.com/examples/nth-child-tester/
결론:
nth-of-type
은 "선택자"를 먼저 체크하고
nth-child
는 (2n+1)같은 "로직"을 먼저 계산한다.
(잘 모르겠으면
nth-of-type
가 예상대로 동작한다)
예시
html
<div>
<h1>나는 제목</h1>
<p>문장 1</p>
<p>문장 2</p>
<p>문장 3</p>
<p>문장 4</p>
<h3>나는 부제목</h3>
<p>문장 5</p>
<p>문장 6</p>
<p>문장 7</p>
</div>
nth-child
div p:nth-child(odd) {
color: red;
}
nth-child는 로직을 먼저 계산하기 때문에 어떤 태그인지 고민하지않고 홀수인지를 먼저 선택한다.
그래서 홀수는
<div>
<h1>나는 제목</h1> // 홀
<p>문장 1</p> // 짝
<p>문장 2</p> // 홀
<p>문장 3</p> // 짝
<p>문장 4</p> // 홀
<h3>나는 부제목</h3>// 짝
<p>문장 5</p> // 홀
<p>문장 6</p> // 짝
<p>문장 7</p> // 홀
</div>
그래서 위처럼 이상하게 보인다.
nth-of-type
div p:nth-of-type(odd) {
color: red;
}
nth-of-type은 어떤 태그인지를 먼저 고민하기때문에 <p>
가 아니라면 홀수인지 아닌지 판단하지 않는다.
<div>
<h1>나는 제목</h1>
<p>문장 1</p> // 홀
<p>문장 2</p> // 짝
<p>문장 3</p> // 홀
<p>문장 4</p> // 짝
<h3>나는 부제목</h3>
<p>문장 5</p> // 홀
<p>문장 6</p> // 짝
<p>문장 7</p> // 홀
</div>
애초에 유도클래스를 잘 안써와서 고민되지 않았는데, 정말 알면 알수록 css를 잘 배우면 프론트하기 편해질 것 같다..
Author And Source
이 문제에 관하여(nth-child vs nth-of-type), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ljh95/nth-child-vs-nth-of-type저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)