使えるcss3セレクタ 属性セレクタ
2011.01.11
この記事は最終更新日から1年以上が経過しています。
使えるセレクタシリーズぅ
属性セレクタです。属性セレクタは、属性名や属性値によって、要素を指定する事ができます。
まずは属性名を指定する方法
HTML
<a href="#" title="hogehoge">titleはhogehoge</a> <a href="#">タイトル無し</a> <a href="#">タイトル無し</a> <a href="#" title="テスト">titleはテスト</a> <a href="#" title="hogehoge">titleはhogehoge</a>
CSS
a[title]{ background:#F00; }
title
属性の値が「hogehoge」の場合のみ、指定する方法
a[title="hogehoge"]{ background:#F00; }
title
属性の値が「ho」で始まる場合のみ、指定する方法
a[title^="ho"]{ background:#F00; }
title属性が”ト”で終わる場合のみ指定。
a[title$="ト"]{ background:#F00; }
”テスト”の”ト”で終了している為、適応される。
title属性の値に”o”が含まれている場合のみ指定
a[title*="o"]{ background:#F00; }
まとめると、
a要素にtitle属性がある場合
a[title]{}
a要素のtitle属性が”hogehoge”の場合
a[title="hogehoge"]{}
a要素のtitle属性が”ho”で始まる場合
a[title^="ho"]{}
a要素のtitle属性が”ge”で終わる場合
a[title$="ge"]{}
a要素のtitle属性に”o”が含まれる場合
a[title*="o"]{}
以上。