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

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

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

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

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"]{}

以上。