CSS nth-of-type

似曾相似？

比 nth-child 更嚴謹一點

這個跟 :nth-child() 差不多，差別在於它會「按照標籤來分組」：

<div class="wrapper">
  <div>div1</div>
  <p>p1</p>
  <p>p2</p>
  <div>div2</div>
  <p>p3</p>
  <p>p4</p>
  <div>div3</div>
</div>

如果想對第奇數個 <p> 做設定：

.wrapper p:nth-of-type(odd) {
  background-color: orange;
}

輕輕鬆鬆搞定！

常犯的錯誤

但如果這時候你改用 nth-child()，結果會跟你想的不太一樣：

.wrapper p:nth-child(odd) {
  background-color: orange;
}

結果：

這是因為 nth-child 會以「同階層」的元素來做排序，像這樣：

<div class="wrapper">
  <div>1</div>
  <p>2</p>
  <p>3</p>
  <div>4</div>
  <p>5</p>
  <p>6</p>
  <div>7</div>
</div>

所以實際上會先選到第奇數個元素，接著才看是不是 <p>。（可以參考 這裡 的解釋）

至於 nth-of-type() 可以像成是這樣：

<div class="wrapper">
  <div>1</div>
  
  <p>1</p>
  <p>2</p>
  
  <div>2</div>
  
  <p>3</p>
  <p>4</p>
  
  <div>3</div>
</div>

所以一定要搞清楚它們兩個的差別。