使用 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 網站上的相片