初學者指南：如何使用 nth-child 選擇具有特定類別的元素

在學習 CSS 選擇器時，你可能遇到過 :nth-child() 這個偽選擇器，它能根據元素在父容器中的位置來選擇特定的元素。

然而，當你想用 :nth-child() 與具有特定類別的元素結合使用時，可能會發現結果不如預期。

這篇文章將幫助你理解 nth-child 與類別選擇器之間的運作方式，並解決常見的困惑。

:nth-child() 與類別的關係

:nth-child() 是一個根據元素在其父元素中的位置，來選擇元素的偽選擇器。

這意味著它考慮所有的同級元素，而不僅僅是具有特定類別的元素。

例如，如果你有以下 HTML 結構：

<div>
  <div class="red"></div>
  <div></div>
  <div class="red"></div>
  <div></div>
  <div class="red"></div>
</div>

如果你想選擇第二個具有類別 red 的元素，你可能會嘗試這樣做：

div.red:nth-child(2) {
  background-color: red;
}

但是這樣的選擇器，並不會如預期選中第二個帶有類別 red 的元素。

原因在於 :nth-child() 並不是基於類別，而是基於元素在父元素中的位置來進行選擇的。

因此，:nth-child(2) 指的是父元素中的第二個子元素，而不論這個元素是否具有類別 red。

在上面的例子中，div.red:nth-child(2) 會選擇第二個 <div>，而這個元素並沒有類別 red。

為什麼看起來選擇錯誤？

當你使用 div.red:nth-child(6) 或 div.red:nth-child(9) 時，可能會發現選中的元素數量，或者順序與預期不符。

這是因為 :nth-child() 考慮的是所有同級元素的位置，而不是單獨針對具有某個類別的元素。

因此，在包含多種類別的元素中，使用 :nth-child() 可能會導致你選中錯誤的元素。

這也是為什麼你會發現數字似乎「落後」一個或不符合預期，因為 nth-child 會計算所有同級元素，而不是只計算具有特定類別的元素。

:nth-of-type() 與 :nth-child() 的不同

:nth-of-type() 是另一個偽選擇器，它與 :nth-child() 相似，但它只考慮同一類型（例如 <div>）的元素。

這意味著如果父元素中有多種類型的元素，:nth-of-type() 只會計算特定類型的元素。

例如：

<div>
  <div class="red"></div>
  <span></span>
  <div class="red"></div>
  <span></span>
  <div class="red"></div>
</div>

如果你使用以下選擇器：

div.red:nth-of-type(2) {
  background-color: red;
}

這個選擇器會選擇第二個 <div> 元素（即便中間有其他類型的元素，如 <span>）。

但同樣地，它還是基於所有 <div> 元素的位置，而不是僅基於具有類別 red 的元素。

如何選擇第 n 個特定類別的元素？

如果你想要選擇某個特定類別的第 n 個元素，而不是依賴於元素在父元素中的順序，可以考慮使用 JavaScript ，或者使用更靈活的 CSS 選擇器結合方式。

使用 JavaScript

JavaScript 可以幫助你，更精確地選擇具有特定類別的第 n 個元素。

const redElements = document.querySelectorAll('.red');
if (redElements.length >= 2) {
  redElements[1].style.backgroundColor = 'red';
}

在這段代碼中，querySelectorAll('.red') 會選擇所有具有類別 red 的元素，然後我們可以使用陣列索引（例如 redElements[1]）來改變第二個 red 元素的樣式。

使用更精確的 CSS（如果可行）

有時候可以重構 HTML ，或使用其他 CSS 選擇器來達到相同的效果。

但具體方法，會依賴於你所控制的 HTML 結構。

例如，考慮將特定的標籤包裝在另一個容器中，從而更精確地應用 CSS。

小結

:nth-child() 是一個強大的 CSS 偽選擇器，但它是基於元素在父容器中的整體順序進行計算的，這意味著，它並不能直接選擇某個特定類別的第 n 個元素。

如果你需要選擇某個類別的第 n 個元素，可以考慮使用 JavaScript 來精確控制，或者通過重構 HTML 來使選擇器更加靈活。