[CSS] Efficient CSS
keywords: css
, refactor
:is() 和 :where
:is() @ MDN
範例一
/* 原本的寫法 */
article h2, article h3, article h4, article h5 {
font-weight: bold;
font-family: sans-serif;
}
使用 :is()
(過去曾經稱作 :matches()
或 :any()
)來改寫:
/* 更好的寫法 */
article :is(h2, h3, h4, h5) {
font-weight: bold;
font-family: sans-serif;
}
範例二
/* CREDIT: ttps://developer.mozilla.org/en-US/docs/Web/CSS/:is */
/* 原本的寫法 */
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}
可以優化成:
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
提示
:is()
和 :where()
的作用相同,差別只在於它們的 specificity 不同。
:not()
:not() @ MDN
:not()
前面有空格和沒空格的意思不同p:not(.foo)
:找到元素是<p>
,但 class 不為.foo
的元素p :not(.foo)
:<p>
元素中,class 不為.foo
的「所有」元素
:not(.foo, .bar)
的作用等同於:not(.foo):not(.bar)
/* CREDIT: https://developer.mozilla.org/en-US/docs/Web/CSS/:not */
/* 除了 class 是 .fancy 的其他所有 <p> */
p:not(.fancy) {
color: green;
}
/* <body> 中除了 <p> 之外的所有元素 */
body :not(p) {
text-docoration: underline;
}
/* <body> 中除了 <div> 或 <span> 的所有元素 */
body :not(div):not(span) {
font-weight: bold;
}
/* 等同於上面的寫法 */
body :not(div, span) {
font-weight: bold;
}
也可以搭配其他 selector 做組合技:
/* article 中所有 h2, h4, h5,以及「所有不是在 aside 裡的 h3」 */
article :is(h2, h3:not(aside h3), h4, h5) {
/* rules */
}