CSS :is, :where Selector

:is() 跟 :where() 是什麼?

常常在一些情況之下,css selector有可能會需要寫很長,尤其是剛開始在寫sass, scss時,巢狀寫的很開心,結果compile出來的東西有可能會像下面這樣:

.container .class1 article,
.container .class2 article,
.container .class3 article,
.container .class4 article {
  color: #f00;
}

而 :is() 跟 :where() 就是用來解決這個問題。在is:() or :where() 中可以帶入逗點分格的selector,讓原本多行且重複的結構簡化為一行:

.container :is(.class1, .class2, .class3, .class4) article {
  color: #f00;
}

/* or */

.container :where(.class1, .class2, .class3, .class4) article {
  color: #f00;
}

:is() 跟 :where() 的不同

基本上是完全一樣,唯一的差異是 :where() 的權重是0,因此可以被輕易複寫。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料