CSS nth-child

一定會用到的選取器。

簡單說明

簡單來說就是「選到同一階層中的第 n 個」，例如說選奇數個：

<div class="wrapper">
  <div>row1</div>
  <div>row2</div>
  <div>row3</div>
  <div>row4</div>
  <div>row5</div>
</div>

CSS：

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

結果：

常犯的錯誤

假設有段 HTML 長這樣：

<div class="wrapper">
  <div class="bg-red">row1</div>
  <div>row2</div>
  <div class="bg-red">row3</div>
  <div>row4</div>
<div>row5</div>

如果你想選第二個 .bg-red，你可能會這樣寫：

.wrapper .bg-red:nth-child(even) {
  background-color: red;
}

乍看之下意思好像是「選 .wrapper 下面偶數個 .bg-red」，但是不是這樣。

其實正確的順序是「先選到 .wrapper 底下的 nth-child(even) 元素」，接著才從這裡面找出有 .bg-red class 的元素。

拿剛剛的例子來說就是：

<div class="wrapper">
  <div class="bg-red">nth-child(1)</div>
  <div>nth-childn(2)</div>
  <div class="bg-red">nth-child(3)</div>
  <div>nth-child(4)</div>
<div>row5</div>

nth-child(2) 的 div 並沒有 .bg-red 的 class，所以不會被選到，而第二個 .bg-red 實際上是 nth-child(3)，所以也不會被選到。

因此在看這種 selector 的時候，建議 「從後面往前看」，先看後面的 nth-child，在看前面的 class 名稱，會比較好理解一點。

nth-child(an+b)

把 n 想成是你在寫迴圈的那個 i，它會從 0, 1, 2, … 一直跑。另外 a 跟 b 是一個常數，不填的話預設為 0。

所以可以這樣用：

.wrapper div:nth-child(0n+3) => 選到第 3 個 div

.wrapper div:nth-child(2n+1) => 選到第 1 3 5 7 ... 個 div

.wrapper div:nth-child(2n) => 選到第 0 2 4 6 ... 個 div

.wrapper div:nth-child(3n) => 選到第 0 3 6 9 ... 個 div

.wrapper div:nth-child(-1n+9) => 選到第 9 8 7 ... 個 div

.wrapper div:nth-child(4n-2) => 選到第 -2 2 4 6 ... 個 div

.wrapper div:nth-child(3n+1) => 選到第 1 4 7 ... 個 div