web-dev-qa-db-ja.com

CSSで複数の属性セレクタを指定する

次のようなことをするための構文は何ですか。

input[name="Sex" AND value="M"]

基本的に、属性name="Sex"および属性value="M"を持つinput要素を選択します。

<input type="radio" name="Sex" value="M" />

次のような要素は選択されるべきではありません:

<input type="radio" name="Sex" value="F" />
243
John

単純なinput[name=Sex][value=M]はかなりいいでしょう。そしてそれは 標準ドキュメント に実際によく記述されています。

複数の属性セレクタを使用して、要素の複数の属性を参照することも、同じ属性を複数回参照することもできます。

ここで、セレクターは、「hello」属性の値が「Cleveland」で、「goodbye」属性の値が「Columbus」であるすべてのSPAN要素と一致します。

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

補足として、属性値を引用符で囲むことは、この値が有効な識別子ではない場合にのみ必要です。

JSFiddle Demo

350
raina77ow

連結するために:

input[name="Sex"][value="M"] {}

そして労働組合を結ぶために:

input[name="Sex"], input[value="M"] {}
51
Yogesh Khater

属性セレクタを連結します。

input[name="Sex"][value="M"]
27
Dennis

ちなみに、セレクタと左角かっこの間にスペースを入れないでください。

td[someclass] 

働くでしょう。しかし

td [someclass] 

しない。