みなさん、こんにちは。物事の本質を見抜いていきたい周です。

CSSはWebサイトやシステムの見た目を組み立てるために使う言語です。
実はプレーンのCSSでもたくさんの新しい指定方法が登場しています。
昔JavaScriptに頼るしかなかったことも、CSSの新しい構文でカバーできるようになりました。

今回はいくつか紹介したいと思います。

何番目の要素かをより自由に指定できる

:nth-child() セレクタの of 構文

nth-childで何個目の要素を指定するには、要素が「連続」していることが必要です。

これまでは.item:nth-child(3) のようにクラス名を指定しでも、後ろに途切れなく並んでいないと、指定できませんでした。

of 構文という新しい指定方法を使うと、同じクラス名がついている要素のみ抽出し、指定する順番の要素を設定することができるようになりました。

残念ながらも、この指定方法はSassではまだ使えないので、要注意です。

特定の子要素が存在する場合のみでの指定が可能になる

:has() セレクタ

特定の子要素を持っている親要素のみ、スタイルを付けたい場合、JavaScriptで親要素の中で特定の子要素が存在するかどうかを判断するしかなかったです。

しかし、 :has() セレクタを使うと、CSSだけで実装可能になります。

:has() セレクタを使えば、兄要素の直後に特定の弟要素がある場合のみ、スタイルをつけることも可能です。

このセレクトもSassでは効きませんので、要注意です。

カラーシステムの構築に便利

color-mix()関数

color-mix() 関数を使うと、異なる2色を混ぜて、新しい色を作ることができます。

さらに、色と透明度の割合を調整すると、メインカラーに基づいた数段階のカラーを作成できます。

こちらの指定方法もSassでは使うことができません。

最後に

2006年登場したSassというCSSの拡張記法は、その高いメンテナンス性と効率性で、今の主流となりました。

その中、プレーンのCSSでもどんどん進化しています。 昔Sassでしかできなかった入れ子構造や変数も普通のCSSで使えるようになりました。近い将来では mixin (共通処理の再利用)と function (関数) も使えるようになるそうです。Sassの立ち位置は揺れつつありますね。

Sassの時代が終わり、再びプレーンのCSSを使う時代が到来するでしょうか。