属性セレクタで条件下の属性のスタイルを変える
属性セレクタ
セレクタの範囲に特定の属性や属性値を指定することも可能です。
素名[属性名]{プロパティ:値;}
要素名[属性名="属性値"]{プロパティ:値;}
| セレクタ | 説明 |
|---|---|
| 要素[attr=”値”] | attrの値がvalの要素 |
| 要素[attr^=”値”] | attrの値がvalで始まる要素 |
| 要素[attr$=”値”] | attrの値がvalで終わる要素 |
| 要素[attr*=”値”] | attrの値がvalを含む |
属性ごとにスタイルを適用する
フォームの属性ごとに別々のスタイルを割当ててみます。 URL入力ボックスには角ありの罫線を、検索ボックスには角丸罫線を指定します。
nput[type="url"]{
border: solid 1px black;
}
input[type="search"]{
border: solid 1px red;
}
部品ごとに別々のスタイルを適用できます。
実行結果
属性値ごとにスタイルを適用する
サイト内リンクと外部リンクでa要素のスタイルを分ける場合を想定します。 この時a要素のhrefの値が”http”で始まる場合は外部リンクとしてスタイルを記述することができます。
lt;a href="post.HTML">サイト内リンク</a>
<a href="http://hogehoge.com">外部リンク</a>
<a href="https://www.google.co.jp/">Googleへのリンク</a>
{/*サイト内リンクのa要素*/
color:blue;
}
a[href^="http"] {/*httpで始まる＝外部リンク*/
color:red;
}
a[href="https://www.google.co.jp/"] {/*Googleへのリンク*/
color:green;
}
リンク先ごとに別々のスタイルが適用されます。
実行結果
