全新 CSS 函式虛擬類別選取器 :is() 和 :where()

這些看似微不足道的 CSS 選取器語法新增功能，將帶來重大影響。

Adam Argyle

編寫 CSS 時，您可能會產生長長的選擇器清單，用於指定採用相同樣式規則的多個元素。舉例來說，如果您想調整標題元素內的任何 <b> 標記顏色，可以寫成：

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

您可以改用 :is() 並提升易讀性，同時避免使用較長的選取器：

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

其易讀性和較短的選取器便利性只是 :is() 和 :where() 為 CSS 帶來的值。在這篇文章中，您將瞭解這兩個功能虛擬選取器的語法和值。

使用 :is() 前後的無限視覺效果

瀏覽器相容性

:is()

瀏覽器支援

  • Chrome：88。
  • Edge：88。
  • Firefox：78。
  • Safari：14。

資料來源

:where()

瀏覽器支援

  • Chrome：88。
  • Edge：88。
  • Firefox：78。
  • Safari：14。

資料來源

認識 :is() 和 :where()

這些是功能性的虛擬類別選取器，請注意結尾的 ()，以及開頭為 : 的方式。請將這些函式視為與元素相符的執行階段動態函式呼叫。撰寫 CSS 時，您可以使用這些元素，在選取器的中間、開頭或結尾處將元素分組。它們也會變更具體性，讓您強制使您作出或增加具體性。

選取器分組

:is() 可以執行的任何分組作業，:where() 也能執行。包括在選擇器的任何位置使用、巢狀和堆疊。您熟悉且喜愛的完整 CSS 彈性。以下列舉幾個例子：

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

以上每個選取器範例都示範了這兩種功能虛擬類別的靈活性。如要找出程式碼中可能受益於 :is() 或 :where() 的區域，請找出包含多個半形逗號和選取器重複項目的選取器，

使用 :is() 搭配簡單和複雜的選取器

如要複習選取器，請參閱 Learn CSS 中的選取器模組。以下列舉幾個簡單又複雜的選取器範例，有助於說明辨識能力：

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

目前 :is() 和 :where() 在語法上是可以互換的。接著來看看兩者的不同之處

:is() 和 :where() 的差異

就具體性而言，:is() 和 :where() 有明顯差異。如要瞭解特定性，請參閱 Learn CSS 中的特定性模組。

簡短

  • :where() 沒有特定性。
    :where() 會將選取器清單中以函式參數傳遞的所有特定性壓平。這是第一個這類的選取器功能。
  • :is() 會採用其最明確的選取器的明確度。
    :is(a,div,#id) 的 ID 明確度分數為 100 分。

我曾經因為太過熱衷於分組，而從清單中選取最高特異性的選取器，結果就中了招。我總是可以將高特異性的選取器移至自身選取器，以便改善可讀性，以下是我的意思：

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

在 :where() 中，我期待看到程式庫提供沒有特定性的版本。作者樣式和圖書館樣式之間的明確性競爭可能會結束。撰寫 CSS 時，不會有任何特定的競爭對手。CSS 已開發這類分組功能一段時間，這項功能已就緒，但仍有許多未開發的領域。歡迎您盡情享受製作較小的樣式表和移除逗號的樂趣。

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