CSSのデータ属性で要素を選択する

HTML5データ属性（たとえばdata-role）によってCSSの要素を選択することは可能ですか？

属性セレクターを使用するつもりなら、確かに、なぜそうしないのですか？

[data-role="page"] {
    /* Styles */
}

さまざまなシナリオで使用できるさまざまな属性セレクターがあり、リンク先のドキュメントですべて説明されています。カスタムデータ属性が「新しいHTML5機能」であるにもかかわらず、

• ブラウザーは通常、非標準属性をサポートする問題を抱えていないため、属性セレクターを使用してそれらをフィルター処理できるはずです。そして

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

最新のブラウザでは、コンテンツに関係なく属性を選択することもできます

と：

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

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

非常に大きな割合のブラウザで動作します。

これはJQueryセレクターでも使用できます。 document.querySelector

CSS3サブストリング属性セレクターに注目する価値があります

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}

複数のセレクターを組み合わせることができます。これはhref、CSSのみでの値に基づくように、値に基づいてすべての属性と属性を選択できることを知っているのでとても便利です。

属性セレクターを使用するとid、およびclass属性でいくつかの追加機能を試すことができます

これが属性セレクターの素晴らしい読みです

フィドル

a[href="http://aamirshahzad.net"][title="Aamir"] {
  color: green;
  text-decoration: none;
}

a[id*="google"] {
  color: red;
}

a[class*="stack"] {
  color: yellow;
}

<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

ブラウザーサポート：
IE6 +、Chrome、Firefox、Safari

詳細はこちらでご確認いただけます。

    [data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}