web-dev-qa-db-ja.com

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

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

htmlcsshtml5css-selectorscustom-data-attribute
436
Diogo Cardoso

属性セレクタ を使うことを意味しているなら、確かに、そうではない：

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

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

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

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

696
BoltClock

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

と：

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

[anything] {
   /* Styles */
}

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

かなりの割合のブラウザで動作します。

これはJQueryセレクターやdocument.querySelectorを使っても使えます。

97
ocodo

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

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

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

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

あなたは複数のセレクターを組み合わせることができます、そしてCSSだけでそれらの値に基づいてhrefのようにあなたがすべての属性と属性をそれらの値に基づいて選ぶことができることを知っているのでとてもクールです..

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

これは属性セレクターについての素晴らしい読みです

Fiddle

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

詳細はこちらで確認できます。

12
Aamir Shahzad

小さなスニペットと実例のあるCSS属性セレクター

1-[attribute〜= "value"]

2-[attribute ^ = "value"]

-[attribute $ = "value"]

4-[属性| = "値"]

5-[attribute * = "value"]

/* Seven (because it search in all words)*/
div[class="items"] {
  color: red;
}
<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

〜は、指定されたWordを含む属性値を持つ要素を選択するために使用されます

/* Five Six Seven (because it search in all words)*/
div[class~="items"] {
  color: red;
}
<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

^は、属性値が指定された値で始まる要素を選択するために使用されます。

/* One Three Five Seven (because it search in beginning)*/
div[class^="items"] {
  color: red;
}
<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

$セレクターは、属性値が指定された値で終わる要素を選択するために使用されます。

/* Two Four Six Seven (Because it search from end) */
div[class$="items"] {
  color: red;
}
<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

は、指定された値で始まる指定された属性を持つ要素を選択するために使用されます。

/* One Seven (because it start from beggining and search -(hyphen)). ignore started from end */
div[class|="items"] {
  color: red;
}
<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

*は、属性値に指定された値が含まれる要素を選択するために使用されます。

/* One Two Three Four Five Six (because it search all group)*/ 
div[class*="group"] {
  color: red;
}
<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>
0
Vahid Akhtar