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

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

編寫 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 WinklerUnsplash 網站上提供