CSS :has() 擬似クラス: 動的なスタイリングのための強力なセレクター

3. フォームの検証

兄弟要素または親要素に基づいて無効な入力フィールドを強調表示します。

4. カスタム兄弟関係

隣接する兄弟に基づいて要素のスタイルを設定します。

:has() の利点

1. 読みやすさの向上:

   • DOM を検出して操作するための複雑な JavaScript の必要性が軽減されます。

2. パフォーマンスを向上させます:

   • 同様の効果を得る JavaScript ソリューションと比較して軽量かつ効率的です。

3. CSS を簡素化します:

   • 複雑な関係の宣言型スタイルを有効にし、余分なクラスや属性を最小限に抑えます。

ブラウザのサポート

現時点では、:has() 疑似クラスは、以下を含むほとんどの最新ブラウザでサポートされています。

• クロム: 105
• エッジ: 105
• サファリ: 15.4
• Firefox: サポートは検討中です。

古いブラウザの場合は、フォールバックまたはポリフィルが必要になる場合があります。

結論

:has() 疑似クラスは、最新の CSS に大きな変革をもたらし、待望の親セレクター機能をもたらします。要素の関係に基づいて条件付きでスタイルを設定できる機能により、CSS コードが簡素化され、動的なスタイルが強化され、DOM 操作における JavaScript への依存が軽減されます。

プロジェクトで :has() 疑似クラスを探索し、創造的で効率的な Web デザインの新たな可能性を解き放ちましょう!

以上がCSS :has() 擬似クラス: 動的なスタイリングのための強力なセレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。