このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

使えるセレクタシリーズぅ

属性セレクタです。属性セレクタは、属性名や属性値によって、要素を指定する事ができます。

まずは属性名を指定する方法

HTML

<br />
<a href="#" title="hogehoge">titleはhogehoge</a><br /><br />
<a href="#">タイトル無し</a><br /><br />
<a href="#">タイトル無し</a><br /><br />
<a href="#" title="テスト">titleはテスト</a><br /><br />
<a href="#" title="hogehoge">titleはhogehoge</a><br /><br />

CSS

<br />
a[title]{<br />
background:#F00;<br />
}<br />

title 属性の値が「hogehoge」の場合のみ、指定する方法

<br />
a[title="hogehoge"]{<br />
background:#F00;<br />
}<br />

title 属性の値が「ho」で始まる場合のみ、指定する方法

<br />
a[title^="ho"]{<br />
background:#F00;<br />
}<br />

title属性が”ト”で終わる場合のみ指定。

<br />
a[title$="ト"]{<br />
background:#F00;<br />
}<br />

”テスト”の”ト”で終了している為、適応される。

title属性の値に”o”が含まれている場合のみ指定

<br />
a[title*="o"]{<br />
background:#F00;<br />
}<br />

まとめると、

a要素にtitle属性がある場合

<br />
a[title]{}<br />

a要素のtitle属性が”hogehoge”の場合

<br />
a[title="hogehoge"]{}<br />

a要素のtitle属性が”ho”で始まる場合

<br />
a[title^="ho"]{}<br />

a要素のtitle属性が”ge”で終わる場合

<br />
a[title$="ge"]{}<br />

a要素のtitle属性に”o”が含まれる場合

<br />
a[title*="o"]{}<br />

以上。