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

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

Bramus

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

使用 :nth-child() 虛擬類別選取器，即可依索引選取 DOM 中的元素。使用 An+B microsyntax，即可精細控制要選取的元素。

• :nth-child(2)：選取第 2 個子項。
• :nth-child(2n)：選取所有偶數子項 (第 2 個、第 4 個、第 6 個、第 8 個，依此類推)。
• :nth-child(2n+1)：選取所有奇數子項 (第 1 個、第 3 個、第 5 個、第 7 個，依此類推)。
• :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 個子項 (第 1 個、第 2 個、第 3 個、第 4 個、第 5 個)。

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

• :nth-child(n+3):nth-child(-n+5)：選取第 3 個到第 5 個子項 (第 3 個、第 4 個、第 5 個)。

使用 :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 執行作業前預先篩選子項。

範例

舉例來說，: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;
}

雖然這對靜態表格來說沒有問題，但當您開始動態篩選表格內容時，就會出現問題。舉例來說，如果隱藏第二列，則第一列和第三列會顯示出來，且背景顏色相同。

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

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

很棒吧？

相片來源：Markus Spiske 發表於 Unsplash 網站上