2012-03-29 1 views
2

IDに接頭辞が固定された反復要素にスタイルを適用する必要があります。例えば生成されたID old-price-520の場合はold-priceが接頭辞であり、数値の接尾辞が変わります。接頭辞付きIDを持つ要素にスタイルを適用するにはどうすればよいですか?

これらの要素にスタイルを適用するにはどうすればよいですか、またはCSSを使用してそれらを参照するにはどうすればよいですか?ここで

は私が何をしたいかの実例です:

#old-price-* { 
    // some styles 
} 

答えて

4
div[id|="old-price"] 

でこれを行うにはjQueryを使用することができますすべてを選択しますdiv要素:id = old-price-*

Handycapは、# id-selectorのパワーと比較して、かなり劣悪なパフォーマンスです。また、それは通常の#より低い特異性を有する。

編集:

fiddle

+0

これが最適なオプションです。それはCSS2で、IE7でも動作します。 – thirtydot

+0

+1、いいです、私はこれを認識していませんでした。 –

+0

@christoph:私はこの方法を知りませんでしたが、動作していません。私はFirefox 11.0を使用しています –

-1

あなたは '属性は、セレクタで始まる'

http://api.jquery.com/attribute-starts-with-selector/

+1

をサポートしていないブラウザのためにいくつかのJavaScriptを追加する必要がありますしかし

div[id^=old-price] { // some styling } 

は-1これは問題ありませんでした。すべてをjqueryで止めてください... – Christoph

+0

jQueryを使用できないとはっきり言わなかった、それは質問に対する有効な答えです。 – Magrangs

+0

jQueryのタグが表示されますか?jQについての情報を書きましたか?彼はjQを使用したコードを提供しましたか? – Christoph

2

は、あなたがそうすることができるので、同様に、CSS3の属性セレクタ 'で-始まる':

[Attr^="value"] 

をし、具体的な例は次のようになります。これは:

*[id^="old-price-"] 

おそらく同じ結果を達成するためのより多くの方法があります。クイック検索では、attribute selectors depictionというクイックリファレンスがあります。

2

あなたはこのようにCSS3の属性セレクタを使用しようとすることができます:あなたはそれ

+0

これはまた動作します –

関連する問題