1. ホーム
  2. css

[解決済み】CSSで複数の属性セレクタを指定する。

2022-03-24 19:51:43

質問

というようなことをしたいのですが、どのような構文になりますか?

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

基本的には input という属性を持つ name="Sex" という属性だけでなく value="M" :

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

以下のような要素が必要です。 ではない が選択されます。

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

解決方法は?

簡単 input[name=Sex][value=M] を使えば、かなりいい感じになります。そして、実際によく説明されているのが 標準文書 :

複数の属性セレクタを使用すると、複数の属性を参照することができます。 の属性、あるいは同じ属性を複数回指定することができます。

ここでは、セレクタは、"hello" 属性が の値が正確に "Cleveland" であり、かつ "goodbye" の値が正確に "Cleveland" である。 は、まさに "Columbus" という値です。

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

余談ですが、属性値を引用符で囲むのは、その値が有効な識別子でない場合にのみ必要です。

JSFiddleデモ