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

CSS は、開発者が動的で直感的で視覚的に魅力的な Web ページを簡単に構築できるように継続的に進化しています。そのような拡張機能の 1 つは、最新の CSS で導入された :has() 擬似クラスです。この疑似クラスは親を意識した選択機能をもたらし、子要素または兄弟要素の存在または状態に基づいて条件付きでスタイルを適用できるようにします。

この記事では、:has() 擬似クラスについて説明し、その柔軟性と能力を示す例を示します。

:has() 擬似クラスとは何ですか?

:has() 疑似クラスは、子、兄弟、または子孫に基づいて要素のスタイルを設定できるため、「親セレクター」と呼ばれることがよくあります。

• セレクターは、ルールが適用される主な要素です。
• selectorList は条件であり、子、兄弟、またはメイン要素に関連するその他の要素を含めることができます。

主な機能

• 親の認識: スタイルは、その子孫または兄弟に基づいて要素に適用されます。
• 柔軟な条件: 、 ~ 、 > などのコンビネータで動作します。兄弟や子供の関係のために。
• 対話性の向上: JavaScript に依存せずに動的なレイアウトや効果を作成するのに役立ちます。

実用的な例: :has() を使用して兄弟に基づいてボックスをスタイル設定する

2. ダイナミック ナビゲーション メニュー

親にスタイルを適用する

ドロップダウン メニューが含まれている場合。

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 サイトの他の関連記事を参照してください。