CSS で「data」属性を持つ要素を選択するにはどうすればよいですか?

ワイルドカードに基づく属性名の CSS セレクター

CSS セレクターを使用する場合、属性に基づいて要素をターゲットにすることが不可欠です。 「data-*」属性は、要素のカスタム データを保存する便利な方法を提供します。ただし、特定の名前に関係なく、「データ」属性を持つ要素を選択する必要がある場合があります。

属性名ターゲティングの現在の状態

現在、CSS は属性名のワイルドカード セレクターのネイティブ サポートを提供していません。提案 [data-*] は興味深いアイデアですが、まだ実装されていません。

既存のオプション

ワイルドカード属性名の直接的な解決策はありませんが、次の CSS セレクターを使用できます:

[data]

このセレクターは、名前に関係なく、「data」属性を持つ任意の要素を対象とします。ただし、「data」で始まる他の属性を持つ要素が誤って選択される可能性があります。

提案された構文

[email protected] からの有望な提案された構文メーリング リストは次のとおりです。

x-admin-* { ... }
[data-my-*] { ... }

この構文では、属性名のプレフィックス内でワイルドカードの照合が可能になり、より具体的なターゲティングが可能になります。

結論

現時点では、CSS のワイルドカード属性名に基づいて要素をターゲットにする直接的な方法はありません。ただし、提案された構文は、より多用途かつ効率的な属性ベースの選択を可能にする将来の開発が期待されています。

以上がCSS で「data」属性を持つ要素を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。