[CSS] 属性選択子

Study / Javascript, Jquery, Css 作成日付 : 2019/12/02 07:32:37 修正日付 : 2020/01/14 17:25:53

こんにちは。明月です。

CSSの選択子で一番良く使う選択子はタグによって、「id」によって(#id)、「class」によって(.class)が一番良く使う選択子で次がこの属性選択子ではないかと思います。

Htmlタグではタグ名があるし、タグテキストがあります。そして属性(アトリビュート)がありますね。

<!-- タグ名は「input」、属性は「type」、「id」、「value」です。 -->
<input type="text" id="test" value="100%">

CSS側で上の属性によって選択しましょう。

<!DOCTYPE">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <style>
    input,a{
      width: 100px;
      height: 50px;
      margin:10px;
    }
  </style>
 </HEAD>
 <BODY>
  <input type="textbox" readonly="readonly" value="readonly"><br />
  <input type="textbox" value="normal"><br />
  <input type="button" value="button"><br />
  <input type="submit" value="submit button"><br />
  <a href="http://www.nowonbun.com" style="display:block;">明月の開発ストーリ</a><br />
  <a href="https://www.nowonbun.com" style="display:block;">明月の開発ストーリ</a><br />
  <a href="http://localhost" style="display:block;">明月の開発ストーリ</a><br />
 </BODY>
</HTML>

上の例は全て「input」タグが４つ、「a」タグが３つがありますね。

CSSｍｐ属性選択子で選択してスタイルを付けましょう。

/*inputタグでreadonly属性がある要素*/
input[readonly]{
  border:1px solid #000;
}
/*inputタグでtypeの属性がbuttonの要素*/
input[type="button"]{
  border:1px solid red;
}
/*inputタグでvalueの属性がsubmitの文字で含めている要素*/
input[value~="submit"]{
  border:1px solid blue;
}
/*inputタグでhrefの属性がhttpsで始まる要素*/
a[href^="https"]{
  color:green;
}
/*inputタグでhrefの属性がlocalhostで終わる要素*/
a[href$="localhost"]{
  color:gray;
}

上の例をみればBodyの中でタグは全て７つがあります。inputタグは４つで、aタグが３つがあります。

属性選択子はブランケット([])で選択します。

上の通りで一番上のテキストボックスは枠が黒くなりますね。

２つ目のスタイルはボタンタイプのinputタグの枠が赤になります。

３つ目はvalue属性、つまり、値がsubmitを含めているボタンは枠が青になります。

４つ目はhrefの属性が「https」で始まる「a」タグの文字が緑になります。

５つ目はhrefの属性が「localhost」で終わる「a」タグの文字がグレーになります。