CSS 要素名[属性名=”値”]を指定する属性セレクタのサンプル
環境
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にします。