端くれプログラマの備忘録 CSS [CSS] 基本メモ: 属性セレクタ

[CSS] 基本メモ: 属性セレクタ

サンプル

属性が一致したものだけ赤で表示する

<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>
a[href="https://google.com/"] {
    color: red;
}

バリエーション例

属性がhttpsで始まるもの(前方一致)

[href^="http"]

属性がjpで終わるもの(後方一致)

[href$="jp"]

属性にbingを含むもの(部分一致)

[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