CSS 要素名[属性名=”値”]で指定の属性を設定する方法

環境
Google Chrome 109.0.5414.120
Windows 10 Home 64bit

構文
要素名[属性名="値"]
指定の属性の値がある要素にCSSを適用します。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
input[type="button"]{
  color:red;
}
input[type="text"][name="update"] {
     color:green;
}
</style>
</head>
<body>

      <p><input type="button" name="reg" value="登録" /></p>
      <p><input type="text" name="update" value="更新" maxlength="5"/></p>

</body>
</html>

実行結果
button属性の「登録」の色が赤になります
text属性の「更新」の色が緑になります。

CSS

Posted by arkgame