inputのname属性をcssセレクタとして指定する方法
2021年01月25日
inputではname属性での指定がつきものです。そしてそのname属性は多くの場合個別の値が指定されます。
ならわざわざclassをつけなくてもこのnameをセレクタとして指定できないだろうか。
ということでinputのname属性をcssセレクタとして指定する方法を紹介します。
結論
input[name="値"]
例
<style>
input[name="example"]{
border: 1px solid #999;
padding: 10px;
background: #f2f2f2;
display: block;
margin-bottom: 10px;
}
</style>
<input name="example" type="text" value="指定">
<input type="text" value="未指定">[]を使うセレクタを属性セレクタと言います。この[]内にはhtmlタグの属性やその値を入れることができます。
「inputタグのname属性がexampleなら」というセレクタは「input[name="example"]」となります。
この属性セレクタは部分一致の指定も可能です。
詳しくはこちらをご覧ください。
今回はnameの指定でしたが同じ方法でinput[type="text"]と指定するとテキストボックスのinputを指定することができます。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
まとめ
nameをセレクタとして使うには[]属性セレクタを使う。
input[name="値"]
以上、inputのnameをcssセレクタとして指定する方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
