属性値によるセレクタ

属性値によるセレクタは、 要素が特定の属性またはその値を持つかどうかに基づいて 要素を選択し、 必要なスタイルを適用することを可能にします。

例

inputタグのうち、 属性typeの値が textであるものに対して、 背景色を水色に設定してみましょう:

html<p>
  <label>テキストを入力</label>
  <input type="text">
</p>
<p>
  <label>数値を入力</label>
  <input type="number">
</p>

cssinput[type="text"] {
  background-color: #C2DDFD;
}

Результат:

関連項目