nth-child vs 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;
}

<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;
}

<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>