使用 S 語法進一步控管 :nth-child() 選項

先預先篩選一組子項元素，再對其套用 A+B 邏輯。

胸罩

:nth-child() 和 :nth-last-child() 虛擬類別選取器

使用 :nth-child() 虛擬類別選取器即可按照索引選取 DOM 中的元素。使用 An+B 微語法即可精確控管要選取的元素。

  • :nth-child(2)：選取第 2 個子項。
  • :nth-child(2n)：選取所有子項 (nd、4th、6th、8th 等)。
  • :nth-child(2n+1)：選取所有奇怪兒童 (1st、3rd、5th、7th 等)。
  • :nth-child(5n+1)：選取第 1 個 (=(5×0)+1)、第 6 個 (=(5×1)+1)、11 個 (=(5×2)+1)、...子項。
  • :nth-child(5n+2)：選取第 2 個 (=(5×0)+2)、7 個 (=(5×1)+2)、12 日 (=(5×2)+2)、... 子項。

不過，如果省略 A 參數，提供更多廣告素材選擇。例如：

  • :nth-child(n+3)：從第 3 個向上選取所有子項 (第 3、4、5 等等)。
  • :nth-child(-n+5)：選取所有孩子(第 5 個、第 2 個、第 3、4、5 個) 的所有子項。

合併其中幾個選項，:nth-child()即可選取元素範圍：

  • :nth-child(n+3):nth-child(-n+5)：從第 3 個到第 5 個中，選取所有子項 (3th, 4th, 5th)。

使用 :nth-last-child() 即可執行類似的選取作業，但而不是從頭開始計算。

使用 of S 語法的預先篩選選項

CSS 選取器層級 4 的新功能可將選取器清單傳遞至 :nth-child() 和 :nth-last-child()。

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

如果指定 of S，則 An+B 邏輯只會套用至與指定選取器清單 S 相符的元素。基本上，這表示您可以在 An+B 執行作業前預先篩選子項。

瀏覽器支援

  • 111
  • 111
  • 113
  • 9

範例

舉例來說，:nth-child(2 of .highlight) 會選取第二個包含 .highlight 類別的相符元素。採取不同做法：在所有含有 .highlight 類別的子項中，選取第二個。

這與 .highlight:nth-child(2) 相反，後者選取具有 .highlight 類別的元素，且同時也是第二個子項。

您可以在下方的示範中看到這個差異：

  • 符合 :nth-child(2 of .highlight) 的元素具有粉紅色外框。
  • 與 .highlight:nth-child(2) 相符的元素會顯示綠色外框。

請注意，S 是選取器清單，這表示可接受多個以半形逗號分隔的選取器。舉例來說，:nth-child(4 of .highlight, .sale) 會從一組同層中選取第四個元素為 .highlight 或 .sale。

在下方的示範中，符合 :nth-child(4 of .highlight, .sale) 的元素已套用橘色外框。

斑馬條紋壁紙，復刻版

建立斑馬條紋資料表時，會使用 :nth-child() 的經典範例。這是指在這種視覺技巧中，每個表格列都會以不同顏色顯示。一般而言，這個情況包括：

tr:nth-child(even) {
  background-color: lightgrey;
}

雖然這種方法對靜態資料表沒有問題，但當您開始動態篩選資料表內容時，就會發生問題。舉例來說，隱藏第 2 列時，結果會呈現 1 和 3 列，且兩者的背景顏色都相同。

如要修正這個問題，我們可以從 An+B 邏輯中排除隱藏資料列，以使用 :nth-child(An+B [of S]?)：

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

很不錯，對吧？

Markus Spiske 提供 Unsplash 網站上的相片