こんにちは、ユアサです。
今回はCSSの擬似クラスの使い方を少し工夫することによってできる、小ワザのようなアプローチについて作成例を数点交えて紹介したいと思います。
あくまでも作成例なので、「こう作ればいいんだ」というより「やりようはあるんだな」というインスピレーションの一端を探す程度の姿勢で読んでいただければ幸いです。
親要素○○状態の時に××の子要素にスタイル付与
CSSの擬似クラスのうち、ホバー時に機能する:hover()やフォーカス時に機能する:focus()などのユーザー操作擬似クラスがありますが、これらを単体で使うことが多いかと思います。これらに:not()や:has()などの関数擬似クラスを組み合わせて併用すると、より詳細に具体的な条件を設けてスタイル付与ができるようになります。
上記2点をさらに親要素・子要素などで併用すると、『○○状態にある親要素内の××状態にある子要素』といったように条件を絞りつつスタイル分けができるので、よりCSSでの表現の幅が広がったりします。
例1：『親要素が○○されている時の××状態でない子要素』のスタイル付与
スタイリッシュなデザインのページに度々ある『ホバーするとスポットが当たったように強調される』CSSの作成例です。以下をご覧ください。
See the Pen css_ pseudo_sample01 by felly (@felly00505) on CodePen.
ホバーした要素だけ強調するのであれば:hover()だけで事足りますが、落ち着いたシックなデザインのページではデフォルトのスタイルから強調するのは好ましくないな・・・という場面もまあまああるかと思います。よってホバーされた要素以外を暗くしたり薄くして強弱の差異をつけるといった手段が取れる訳ですが、上記コードはその仕様を実装したものになります。
元々のスタイルはデフォルトとして据えたまま、ulタグがホバーされた場合に機能し、ホバーされていないspanタグを持ったliタグにのみスタイル付与ができています。一応他にもやりようはありますがCSSの記述が嵩むため、工夫してこのように比較的スマートに実装できるこの記述であればなんとな〜く有用性はお分かりいただけるかと思います。
例2：『親要素が○○の子要素を持っている時の××状態でない子要素』のスタイル付与
複数あるラジオボタンの中から選択後、選択されていないラジオボタンを薄くすることによって明示的に表現したCSSの作成例です。
See the Pen css_ pseudo_sample02 by felly (@felly00505) on CodePen.
表現方法としては例1同様に選択した要素以外を薄くすることによって相対的に強調できます。この手法のラジオボタンは度々見かけますよね。
こちらは:has()を使って子要素にチェックされたラジオボタンがある場合に機能するようになっており、実質子要素の状態を参照した記述になっています。これを参照した上でラジオボタンがチェックされていない要素は自動でopacity: 0.5;が付与されるようになります。
細かいところですが、フォームの入力画面で選択肢をパッと見で分かりやすくできます。
JS不使用のモジュール
タイトル通り、JSを使わないJSっぽい動作をするモジュールも作れます。
See the Pen css_ pseudo_sample03 by felly (@felly00505) on CodePen.
例えばアニメーション付きのアコーディオンです。アコーディオンにボタンを設置し、JSで『開閉する要素の高さを取得しておいて一旦閉じ、ボタンがクリックされたらトグルでクラスの付与やスタイル更新などで取得した高さ分を要素に付与する』といった内容で実装することが多いかと思いますが、これもCSSだけで作れます。
上記コードを見ていただければ分かるかと思いますが、ボタンをチェックボックスとして用意し、アコーディオンの中身をgrid-template-rows: 0fr;で閉じる状態をデフォルトに、セクションがチェックされたチェックボックスを持ったh2を持っていた場合にアコーディオンの中身に対してgrid-template-rows: 1fr;を付与する仕様になっています。
（逆にチェックボックスのチェックを外せば元のgrid-template-rows: 0fr;に戻るだけなので、開閉どちらも問題なく動作できます）
最後に
擬似クラスは他にもたくさんあるので、使い所でしっかり実装できればより多くのことができ面白いですよね。
MDNの擬似クラスのページを眺めるだけでも5割くらい見たことないものだらけなので、色々使い勝手を試してみて実務に活かしていければと思います。
