この記事はCSSを学習し、更に学習を重ねたいWebデザイナーやコーダー、エンジニアに向けた記事になります。
ここ数年、CSSの使い勝手が劇的に変化してきたように思います。その理由としてはIEをサポートする必要がなくなったということも大きいでしょう。ブラウザ戦争の終結も少々寂しいものがありますが、今後のブラウザの進化に期待したいところです。
というわけでその一つとして使用できる擬似クラスが沢山出てきた中でも話題になっていた「:is()」について振り返りたいです。
以下、茶番も兼ねていますが御覧ください。
CSSを書ける猫とCSS極めたい猫
カチャカチャ…スッターン！！ほて、CSS書き終えたニャ！！
どれどれ…、ほてちゃんが書いたCSSはこれかミャ？
/** 特定の場所にあるリンクを選択したら赤色に変えたいニャ **/
.cats_box a:hover,
.cats_box a:focus,
.ruri_box a:hover,
.ruri_box a:focus,
.hotemaru_box a:hover,
.hotemaru_box a:focus {
color: #ff0000;
}…ずいぶんと重複しちゃってるミャ。もうちょっと短くできないかミャ？
ほて、色々なほーむぺーじ見てきたけどこんな感じの書き方が多かったにゃ。ちゃんと抜けもれなく指定できてるか不安ニャ～。
ほてちゃん、こうすると短いし重複もなくなるミャ
/** 特定の場所にあるリンクを選択したら赤色に変えたいニャ **/
:is(.cats_box, .ruri_box, .hotemaru_box) a:is(:hover, :focus) {
color: #ff0000;
}ほてええぇぇぇええ？！何だニャこの「:is」って！！！
ようやくほぼ全てのブラウザで使えるようになった擬似クラス関数「is」だミャ。簡単に説明すればis内のどれか一つ該当すれば適用できるミャ。
つまるところ重複するような部分を簡略化したり、大量の条件をコツコツ書かないといけないようなときにまとめることができる便利なものだミャ～。
なんだか不安だにゃ。20年間CSS書いてるパピーは「動くかわからないから昔ながらの書き方が一番！！」って言ってたにゃ？
さっきもいった通り「ほぼ」全てのブラウザで使えるようになったと言うのはIEが世間的にサポート外になったということが多いミャ（正確には2023年2月14日予定）。ちゃんとブラウザごとのサポート状況は確認するのが無難だミャ。
古い書き方とかもあるけどここ数年で対応してないブラウザはほぼなくなったといっても良いミャ。IE対応しなきゃならない、という場合はこれだけじゃなくって他の色々使えないからおじさんに任せておくミャ～。
まとめ：CSSでできることがめちゃくちゃ増えたので学び直さないといけない時代に突入
複数の要素に同一内容を指定しなければいけないとき、大量の重複したコードを書かなければいけないことに辟易とし、引き継いだり、引き継がれたりしたときにこうした重複コードを書き換えなければいけないときなんかは事故の原因になったりもします。
「:is()」は本当に便利なものなので、使いこなしたいものです。
余談ですが10代の頃（20年以上前…）から当然ながらCSSの状況も大きく変わりました。個人的には多種多様なメディアに対応するためのレスポンシブウェブデザインという設計思考から、SassやJavaScriptで頑張らなければいけないような部分もCSS単品でできるようになってきているから驚きです。
