属性セレクターを使用して CSS 内の要素を選択する

Question

CSS では、HTML5 データ属性 (例: data-role) を介して要素を選択することはできますか?

Answer 1

最新のブラウザでは、内容に関係なく属性を選択することもできます。

次のコードを使用します:

リーリー

例: http://codepen.io/jasonm23/pen/fADnu

ほとんどのブラウザに適用できます。

これは、JQuery セレクター内で、または document.querySelector を使用して使用することもできることに注意してください。

Answer 2

属性セレクター を使用する場合は、もちろん次のことができます:

リーリー

さまざまなシナリオで使用できるさまざまな属性セレクターがあり、これらについては、提供するドキュメントで詳しく説明されています。カスタム データ属性は「HTML5 の新機能」ですが、

• ブラウザは通常、非標準属性を問題なくサポートするため、属性セレクターを使用してフィルタリングできるはずです。また、

• CSS の検証についても心配する必要はありません。CSS はセレクター構文を壊さない限り、名前空間以外の属性名を気にしないからです。