2016-09-12 11 views
0

htmlページには、q1r1、q1r2、q1r3、q2r1、q2r2、q2r3などのdiv IDが含まれています。CSSでこれらのIDを選択して一度にスタイルを適用するにはどうすればいいですか? IDがq1、q2、q3 ..の場合、id^= "q"とすることができます。特定のパターンのIDを選択するCSSを取得する方法は?

+2

を適用することができますか? –

+0

'[id^=" q "]' _does_それらのすべてを選択するか、あなたが望むものを理解していませんか? –

+0

htmlはいくつかの複雑なpythonスクリプトによって自動的に生成されます。 – mathsbeauty

答えて

0

あなた[id^q]を行うことができます。

JS Fiddle

[id^=q] { 
    // common styles 
} 

をそして、あなたはあなたが使用できる省略したい特定のIDがあれば[id^=q]:not(#idname)

JS Fiddle


たり、特定のパターンで始まるIDを除外したい場合は、のような2を組み合わせる:

JS Fiddle

/* All ids that start with "q" but not "qr" */ 
[id^=q]:not([id^=qr]) { 
    // Styles here 
} 

しかし、私は絶対には、共通のクラスを追加することをお勧めしますそれは彼らが設計されたものであるからです。 idをpythonで追加できる場合は、クラスを追加することもできます。あなたがそれぞれに共通のクラス名を適用することはできませんなぜセレクタ「^」のスタイルを使用することにより

+0

ありがとうございました...ほぼ解決策です... – mathsbeauty

+0

問題点は何ですか? –

0

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div[id^="q"] { 
 
    background: #ffff00; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div id="q1r1">The first div element.</div> 
 
<div id="q1r2">The second div element.</div> 
 
<div id="q2r2">The third div element.</div> 
 
<p id="q2r1">This is some text in a paragraph.</p> 
 

 
</body> 
 
</html>

関連する問題