全新 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 網站上提供