html - css でカスタム データ属性に優先順位を割り当てる

Question

これは非常に基本的なことのように思えますが、カスタム データ値を含む HTML 要素の CSS 優先順位を作成しようとしています。この値は、コア スタイルの変更を必要とするまれなコンテキストに使用されます。ID とデータ セレクターをうまく組み合わせることができませんでした。これは可能ですか？

<div #id="x">で優先順位を作成する方法に関するガイダンスはあり<div id="x" data-value="y">ますか?

ありがとう

Answer 1

CSS ルールで属性の存在を使用できます。

#x {
    /* default CSS here */
}

#x[data-value] {
    /* CSS for items with the attribute here */
}

参考までにこちらをご覧ください。

ただし、これらの要素が両方とも同じページに存在する場合、問題が発生する可能性があります。これは、ページ内に特定の ID を持つオブジェクトを 1 つだけ持つ必要があるため、おそらく ID の代わりにクラスを使用する必要があるためです。

実際のデモ: http://jsfiddle.net/jfriend00/nCD3m/