前回構造疑似クラスについて便利な使い方をご紹介しましたが、
（知ってそうで知らないCSS3の便利な使い方【その1：構造疑似クラス編】）
今回はCSS3の属性セレクタをご紹介します。
目次
E[foo]
foo属性を持つE要素に対してスタイルを適用。値は何でもOK。
サンプル
<style>
h2[title] {
color:rgba(255,0,0,1);
}
</style><h2 title=”適用する”>適用する<h2>
<h2 title=””>適用する<h2>
適用しない
適用する
適用する
E[foo=”bar”]
barという値のfoo属性を持つE要素に対してスタイルを適用
サンプル
<style>
h2[title="hoge"] {
color:rgba(255,0,0,1);
}
</style><h2 title=”hogehoge”>適用しない<h2>
適用する
適用しない
E[foo~=”bar”]
barという値を1つでも含んでいるfoo属性を持つE要素に対してスタイルを適用
サンプル
<style>
h2[class~="hoge"] {
color:rgba(255,0,0,1);
}
</style><h2 class=”fuge hoge”>適用する<h2>
<h2 class=”fuge hogehoge”>適用しない<h2>
適用しない
適用する
適用しない
E[foo^=”bar”]
barという値から始まるfoo属性を持つE要素に対してスタイルを適用
サンプル
<style>
h2[class^="hoge"] {
color:rgba(255,0,0,1);
}
</style><h2 class=”hoge”>適用する<h2>
<h2 class=”hogehoge”>適用する<h2>
適用しない
適用する
適用する
E[foo$=”bar”]
barという値で終わるfoo属性を持つE要素に対してスタイルを適用
サンプル
<style>
a[href$=".html"] {
color:rgba(255,0,0,1);
}
</style><p><a href=”//www.markernet.co.jp/index.html”>適用する</a></p>
<p><a href=”//www.markernet.co.jp/”>適用しない</a></p>
E[foo*=”bar”]
barという文字列を含むfoo属性を持つE要素に対してスタイルを適用
サンプル
<style>
a[href*="markernet.co.jp"] {
color:rgba(255,0,0,1);
}
</style><p><a href=”//www.markernet.co.jp/index.html”>適用する</a></p>
<p><a href=”//www.markernet.co.jp/”>適用する</a></p>
E[foo|=”bar”]
barの値がハイフン区切りの値をとり、barから始まるfoo属性をもつE要素に対してスタイルを適用
サンプル
<style>
a[hreflang|="en"] {
color:rgba(255,0,0,1);
}
</style><p><a href=”#” hreflang=”en”>適用する</a></p>
<p><a href=”#” hreflang=”en-US”>適用する</a></p>
いかがでしたか？
前回ご紹介した構造疑似クラス等と合わせて属性セレクタを使ってみてください。
より細かな指定が可能になりますね！
