:is()
:is(...selectors)
複数の要素に対し、同じ指定をしたい場合に簡潔に書ける
以下2つが同じ意味になる
code:before.css
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}
code:after.css
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
ただし、展開前と展開後は常に同じになるとは限らないので注意mrsekut.icon*2
子孫結合子の親と子の両者で:isを使った場合、全ての組み合わせになる 以下のように書くと、$ 2*6個分同時に指定したことになる
code:after.css
:is(section, article) :is(h1, h2, h3, h4, h5, h6) {
color: red;
}
Listモナドを彷彿とさせるmrsekut.icon
以下と同じ
code:before.css
section h1, section h2, section h3, section h4, section h5, section h6,
article h1, article h2, article h3, article h4, article h5, article h6 {
color: red;
}