HTMLのinput要素にCSSスタイルをあてる際に、input要素のname属性、value属性など、複数の属性を同時に指定してスタイルをあてる方法を最近知ったのでここに紹介する。

まず、サンプルとして以下のようなHTMLを用意した。

<body>
  <input type="text" name="name" value="hogehoge">
  <input type="text" name="name" value="fugafuga">
</body>

まず、一つの属性を指定する場合は以下の書き方で良い。

input[name="name"] {
  color: #c00;
}

この場合、どちらの要素にもスタイルが適用される。

次に、value="hogehoge"の要素のみに対しスタイルをあてる場合は、以下のように書く必要がある。

input[name="name"][value="hogehoge"] {
  color: #00c;
}

同時に指定したvalue属性の値がマッチした要素にのみスタイルがあたっていることが分かる。

複数の属性を同時に指定する場合の書き方は特殊で、以下のような書き方ではいずれもスタイルは適用されないので注意が必要だ。

/* 以下はいずれも誤り */

input[name="name", value="hogehoge"] {
  color: #00c;
}

input[name="name" value="hogehoge"] {
  color: #00c;
}