:is()

:is()支援度:Can I Use

:is()是什麼?

• :is(selectors)
• 以選擇器列表作為參數，並選擇該列表中任意一個選擇器可以選擇的元素。
• 在繁複的選擇器撰寫上非常方便，可以簡化選擇器的撰寫。
• specificity 是1，權重在選擇器一樣下通常會最高。

:is(ol, ul) p {
  color: green;
}
/* 下方其實等於上方那段 */
ol p,
ul p {
  color: green;
}

:where()

:where()支援度:Can I Use

:where()是什麼?

• :where()將會選擇所有能被該選擇器列表中任何一條規則中選中的元素。
• 在繁複的選擇器撰寫上非常方便，可以簡化選擇器的撰寫。
• specificity 是0，可以很容易被後方樣式取代。

:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* 下方其實等於上方那段 */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

:is()和:where()

• 相同:在繁複的選擇器撰寫上非常方便，可以簡化選擇器的撰寫。
• 相異:is()specificity 是1，:where()specificity 是0。

Codepen範例

IT15-Day17-:is() and :where()

參考來源

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/:is
• https://css-tricks.com/almanac/selectors/i/is/
• https://developer.mozilla.org/zh-CN/docs/Web/CSS/:where
• https://css-tricks.com/almanac/selectors/w/where/
• https://zxuqian.cn/videos/css/css-where-selector-tutorial/
• https://blog.logrocket.com/deep-dive-css-where-is-functions/