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

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

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

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

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

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

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

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

/* .itemクラスが付いているdiv要素の3番目にスタイルをつける */
div:nth-child(3 of .item) {
	/* スタイル */
}

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

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

:has() セレクタ

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

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

/* .parent要素の中に、.child要素がある場合のみ、スタイルをつける */
.parent:has(> .child) {
	/* スタイル */
}

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

/* .brother要素の直後に.young-brother要素があれば、スタイルをつける */
.brother:has(+ .young-brother) {
	/* スタイル */
}

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

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

color-mix()関数

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

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

  --colorPrimary: #074943;
  --colorPrimary-10: color-mix(in srgb, var(--colorPrimary), transparent 90%);
  --colorPrimary-20: color-mix(in srgb, var(--colorPrimary), transparent 80%);
  --colorPrimary-30: color-mix(in srgb, var(--colorPrimary), transparent 70%);

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

最後に

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

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

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