CSS セレクターを使用して、任意の属性名の要素をターゲットにできますか?

無差別属性ターゲティング用の CSS セレクター

はじめに

Web 開発では、特定の属性に基づいて要素を操作するために CSS セレクターがよく使用されます。データ属性を扱う場合、利用可能なターゲティング オプションとその制限を理解することが重要になります。

ワイルドカード属性名

ワイルドカード属性名の概念は、次の必要性から生まれました。名前に関係なく、特定の名前空間内の任意の属性を持つ要素を選択します。これは理想的なソリューションのように思えるかもしれませんが、現時点ではこの機能を実現できる CSS セレクターはありません。

利用可能なオプション

ただし、次のことを可能にするセレクターは存在します。特定のパターンに基づいて属性値をターゲットにします:

• [data-something='value'] という名前のデータ属性を持つ要素をターゲットにします"data-something" および "value" と正確に等しい値。
• [data-something^='value'] は、"data-something" が "value" で始まる要素を選択します。
• [data-something*='value'] は、「data-something」に「value」が含まれる要素をターゲットとします。

属性のターゲット設定with Any Name

残念ながら、ANY 属性名を持つ要素を直接ターゲットにするセレクターはありません。これは、[data-*] などのワイルドカード属性名がサポートされていないことを意味します。

将来の実装の提案

導入に向けて CSS コミュニティ内で議論が進行中です。属性ターゲティングのためのより包括的な構文。 Simon Pieters が提案した提案の 1 つは、名前空間宣言でワイルドカードを使用することです。

• x-admin-* は、x-admin 名前空間内の任意の属性と一致します。
• [data-my-* ] は、data-my.

で始まるすべての属性を対象としています。これらの提案はまだ標準化されていませんが、将来の開発の可能性を示しています。属性ターゲティング

以上がCSS セレクターを使用して、任意の属性名の要素をターゲットにできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。