属性セレクタで条件下の属性のスタイルを変える

html

属性セレクタ

セレクタの範囲に特定の属性や属性値を指定することも可能です。

要素名[属性名]{プロパティ:値;}
要素名[属性名="属性値"]{プロパティ:値;}
セレクタ説明
要素[attr=”値”]attrの値がvalの要素
要素[attr^=”値”]attrの値がvalで始まる要素
要素[attr$=”値”]attrの値がvalで終わる要素
要素[attr*=”値”]attrの値がvalを含む

属性ごとにスタイルを適用する

フォームの属性ごとに別々のスタイルを割当ててみます。 URL入力ボックスには角ありの罫線を、検索ボックスには角丸罫線を指定します。



input[type="url"]{
  border: solid 1px black;
}

input[type="search"]{
  border: solid 1px red;
}

部品ごとに別々のスタイルを適用できます。

style-change-attribute01

属性値ごとにスタイルを適用する

サイト内リンクと外部リンクでa要素のスタイルを分ける場合を想定します。 この時a要素のhrefの値が”http”で始まる場合は外部リンクとしてスタイルを記述することができます。

<a href="post.html">サイト内リンク</a>
<a href="http://hogehoge.com">外部リンク</a>
<a href="https://www.google.co.jp/">Googleへのリンク</a>
a{/*サイト内リンクのa要素*/
  color:blue;
}

a[href^="http"] {/*httpで始まる=外部リンク*/
  color:red;
}

a[href="https://www.google.co.jp/"] {/*Googleへのリンク*/
  color:green;
}

リンク先ごとに別々のスタイルが適用されます。

style-change-attribute02

アマルウェブ HOME