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를 잘 배우면 프론트하기 편해질 것 같다..