はじめに
こんにちは、安立です。
今回はCSSの擬似クラス:has()に関してです。
数年前まで長〜い間、CSSででは子要素から親要素を選択する事が不可能でした。
そんな中、CSS Selectors Level 4で導入された擬似クラスの:has()が、2022年くらいからブラウザでサポートされ始めました。
これによって、遂に親要素セレクタがが実現されました！やったね！！！
さて、それでは擬似クラス:has()がどんなものなのか、実践的な活用方法を紹介しますね。
:has()疑似クラスとは?
基本的な構文
基本的構文は以下のように書きます。
/* 基本構文 */
親要素:has(子要素のセレクタ) {
/* スタイルを記載 */
}
/* 例：video要素を含むdivを選択 */
div:has(video) {
border: 2px solid #ff0000;
}
ブラウザサポート
基本的なブラウザは全て対応しているので、ガンガン使っていきましょう！
:has()疑似クラスの実践的な活用方法
1. ナビゲーションの条件によるスタイリング
グローバルナビ等で、サブナビゲーションがある時だけアイコンを表示したい時がありますよね。
そんな時は:has()を使って効果的に実現できますよ〜！
以下、実装コードです。
.sub-navがある時にアイコンを表示しています。
2. フォームのバリデーション表示
フォームのバリデーション表示でも使えます。
これまでは、バリデーションエラーが発生したときに、フォーム要素にエラー用のclassを付与するなどしてエラー表示を行っていました。
:has()を使えば簡単に実現できます。
以下、実装したコードです。
.error-messageという要素を.form-groupが持つ時に、子要素の色等を調整することができます。
3. 画像の配置調整
子要素の画像の数によってのレイアウト調整なんてのもできますよ。
gridを使って、3枚目の画像があるかどうかでレイアウトを変更しています。
まとめ
子要素から親要素を選択することができることで、余計なJavascriptやclassなどを作成せずに、CSSのみで実現できる幅が広がりますね。
実践的な活用方法で示した例以外にもたくさん使い方があるので、積極的に使っていきましょう〜。
他のCSSのセレクタでも言えることですが、パフォーマンスは気にしつつやりましょうね。
それではまた〜〜〜。
Discussion