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

CSS では、複数の属性に基づいて要素を選択できます。これは、基準の組み合わせで特定の要素をターゲットにする場合に便利です。

構文:

複数の属性値に一致する要素を選択するには、次の構文を使用します。 :

[attribute1=value1] [attribute2=value2]

たとえば、入力要素を選択するには属性名 = "Sex" および属性値 "M" の場合、次のセレクターを使用します:

input[name=Sex][value=M]

例:

次の HTML マークアップを考えてみましょう:

最初の入力要素には両方の要素があるため、input[name=Sex][value=M] セレクターによって選択されます。 name="Sex" および value="M" 属性。 2 番目の入力要素は、value="M" ではなく value="F" 属性を持つため、選択されません。

注:

前後に引用符を使用します。属性値は、値が有効な識別子ではない場合にのみ必要です。

参照:

この構文は次のとおりです。 CSS 標準ドキュメントで詳しく説明されています:

Multiple attribute selectors can be used to refer to several
attributes of an element, or even several times to the same attribute.

...

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