CSS 要素名[属性名=”値”]を指定する属性セレクタのサンプル

2022年11月4日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
1.input要素でtypeが属性がbuttonの場合
input[type="button"]
inputが要素でtypeが属性でbuttonを対象にします。

2.type属性を２つ続け指定
input[type="text"][name="値"]{
type属性を２つ続けて指定します。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
/*要素名[属性名="値"] */
input[type="button"]{
   color:yellow;
}
/*要素名[属性名1="値1"][属性名2="値2"] */
input[type="text"][name="input"]{
   background-color:skyblue;
}
</style>
</head>
<body>
  <p><input type="button" name="mod" value="修正" /></p>
 <p><input type="text" name="input" value="山田 太郎" /></p>
</body>
</html>

結果
要素「mod」ボタンの色をyellowにします
要素「input」のテキストボックスをskyblueにします。

CSS

Posted by arkgame