サンプル
属性が一致したものだけ赤で表示する
|
1 2 3 |
<p><a href="https://google.com">Google</a></p> <p><a href="http://yahoo.co.jp">Yahoo!</a></p> <p><a href="http://bing.com">Bing</a></p> |
|
1 2 3 |
a[href="https://google.com/"] { color: red; } |
バリエーション例
属性がhttpsで始まるもの(前方一致)
|
1 |
[href^="http"] |
属性がjpで終わるもの(後方一致)
|
1 |
[href$="jp"] |
属性にbingを含むもの(部分一致)
|
1 |
[href*="bing"] |
参考サイト
属性セレクタ – CSSの基本書式 – スタイルシート入門
http://www.webword.jp/cssguide/basic/index9.html
属性セレクタ－スタイルシートリファレンス
http://htmq.com/selector/attr.shtml
属性（値）セレクタ－スタイルシートリファレンス
http://htmq.com/selector/attrvalue.shtml
属性（値候補）セレクタ－スタイルシートリファレンス
http://htmq.com/selector/attrvaluet.shtml