CSS で「data-*」属性の存在に基づいて要素をターゲットにできますか?

ワイルドカードによる属性名の選択

Web 開発では、CSS セレクターにより、属性に基づいて HTML 要素を正確に制御できます。さまざまな属性ベースのセレクターの中でも、「data-*」属性を持つ要素をターゲットにする特定のニーズが存在します。属性の値に基づいて要素を選択するためのさまざまな方法が存在しますが、「データ」属性の存在のみに基づいて要素をターゲットにできるのかという疑問が生じます。

現在の可能性を理解するために、既存の属性を調べてみましょう。値ベースのセレクター:

• 完全一致: 属性値が指定された値と等しい要素を選択します([data-something="value"]).
• 部分一致 (開始): 属性値が指定された接頭辞 ([data-something^="value") で始まる要素を選択します"]).
• 部分一致 (終了): 属性値が指定された接尾辞で終わる要素を選択します([data-something$="value"]).
• 部分一致 (どこでも): 属性値に指定された部分文字列 ([data-something*="value") が含まれる要素を選択します。 "]).

ただし、属性名自体に基づいて要素をターゲティングする特定のケースでは、属性名自体が 1 つだけあります。オプション:

• 属性名 存在: 特定の属性 ([data-something]) を持つ要素を選択します。

残念ながら、現在、 [data-*] などの属性名のワイルドカード セレクターはありません。これは、CSS のみを使用して「データ」属性を持つ要素をターゲットにすることはできないことを意味します。

それでも、属性名のワイルドカード機能を導入するための取り組みがセレクター レベル 3 仕様内で継続的に行われています。注目を集めている提案された構文は次のとおりです。

• x-admin-*: 「x-admin-」で始まる属性名を持つ要素を選択します。
• [data-my-*]: で始まる属性名を持つ要素を選択します"data-my-".

これらのセレクターはまだ標準の一部ではありませんが、将来的に属性名をワイルドカード化できる可能性を示しています。

以上がCSS で「data-*」属性の存在に基づいて要素をターゲットにできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。