527

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

4

6 に答える 6

827

属性セレクターを使用する場合は、確かに、次のことを行ってください。

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

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

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

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

于 2011-03-16T11:09:10.313 に答える
118

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

と： 

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

[anything] {
   /* Styles */
}

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

非常に多くのブラウザで動作します。

これは、JQueryセレクターで使用することも、document.querySelector

于 2013-09-12T02:01:46.937 に答える
59

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

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

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

[attribute*=value] { /* contains selector */
/* Styles */
}
于 2015-05-18T15:50:40.633 に答える
16

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

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

于 2016-03-30T04:01:57.973 に答える
10 
    [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 */
}
于 2020-01-03T10:18:36.883 に答える
0

HTML5データ属性でCSSの要素を選択することは可能ですか？これは試してみるだけで簡単に答えることができ、もちろん答えはイエスです。しかし、これは常に次の質問につながります。「CSSの要素をHTML5データ属性で選択する必要がありますか？」これについては相反する意見があります。

'no'キャンプには、CSSの伝説であるハリーロバーツがいます（または少なくとも2014年にそうでした）。記事「OOCSSでのUIコンポーネントの命名」で、彼は次のように書いています。

data- *属性を介してHTMLのスタイルを設定することはできますが、おそらくそうすべきではないことに注意することが重要です。data- *属性は、オンを選択するためではなく、マークアップでデータを保持するためのものです。これは、HTML Living Standard（私の強調）から：

「カスタムデータ属性は、ページまたはアプリケーションにプライベートなカスタムデータを格納することを目的としており、適切な属性または要素はこれ以上ありません。」

W3Cの仕様は、この点でイライラするほど曖昧でしたが、純粋にそれが何をしたか、何を言わなかったかに基づいて、ハリーの結論は完全に合理的だったと思います。

それ以来、 MDNのガイド「データ属性の使用」など、カスタムデータ属性をスタイリングフックとして使用することが完全に適切であることが多く の 記事で示唆されています。コンポーネントの「例外」（ BEMでは修飾子として知られている）にスタイルを追加するための好ましい方法としてデータ属性フックを採用したCUBECSSと呼ばれるCSS方法論もあります。

ありがたいことに、WHATWG HTML Living Standardには、さらにいくつかの単語といくつかの例が追加されています（私の強調）。

カスタムデータ属性は、ページまたはアプリケーション専用のカスタムデータ、状態、注釈などを格納することを目的としており、適切な属性または要素はこれ以上ありません。

この例では、カスタムデータ属性を使用してPaymentRequestの機能検出の結果を保存します。これは、CSSで使用してチェックアウトページのスタイルを変えることができます。

作成者は、属性が無視され、関連するCSSが削除された場合でもページが引き続き使用できるように、このような拡張機能を慎重に設計する必要があります。

TL; DR：はい、data-*CSSセレクターで属性を使用しても問題ありません。ただし、属性がなくてもページを使用できます。

于 2021-02-02T07:30:51.737 に答える