CSS 3 セレクタ最終草案リリース

対応ブラウザ: （CSS Level 3）

CSS 3 セレクタ最終草案がほぼ予定の１ヶ月遅れでリリースされたようです。勧告まであと一息ですね。セレクタが充実してくると、class や id をタグ内に埋め込む割合が激減するので、何とか頑張って IE 7 にも実装してもらいたいところです。

ちょっと実例を出してみましょう。ソースをご覧いただければ一目瞭然ですが、以下のリンクには img タグはもちろんのこと、class や id も一切使わずにリンク先がサイト内外のいずれであるかや、リンク先のファイルタイプを CSS だけで判別して、適切なアイコンを付けています。（残念ながら IE や Opera では未対応。）

• サイト内へのリンク
• サイト外へのリンク
• メールアドレスへのリンク（ダミー）
• PDF ファイルへのリンク（ダミー）
• MS Word ファイルへのリンク（ダミー）
• MS Excel ファイルへのリンク（ダミー）
• テキストファイルへのリンク（ダミー）

スクリーンショット （Windows XP SP2 + Firefox 1.5）

Safari などでのスクリーンショット

(X)HTML ソース

一応、(X)HTML ソースを掲げておくと、img 要素はもちろんのこと、ソースに class や id といった余計な属性が一切なく、とてもすっきりしているのが分かっていただけるかと思います。

<ul>

<li><a href="http://my-chunqiu.cocolog-nifty.com/blog/2005/12/csstarget__a2ca.html">サイト内へのリンク</a></li>
<li><a href="http://www.google.com">サイト外へのリンク</a></li>
<li><a href="mailto:foo@bar.baz">メールアドレスへのリンク（ダミー）</a></li>
<li><a href="dummy.pdf">PDF ファイルへのリンク（ダミー）</a></li>
<li><a href="dummy.doc">MS Word ファイルへのリンク（ダミー）</a></li>
<li><a href="dummy.xls">MS Excel ファイルへのリンク（ダミー）</a></li>
<li><a href="dummy.txt">テキストファイルへのリンク（ダミー）</a></li>

</ul>

CSS ソース

では、どうやってあの簡素な HTML からサイト内外の区別やファイルタイプの識別をしているのか？その答えが次ぎに掲げるソースにあります。

/* HyperLink style
---------------------------------------- */
/* メインコンテンツのみに適用させるため、div.entry の孫要素のみを対象にしてあります。（でないと、カレンダーにまでアイコンがついちゃうので..。(^o^;;ゞ） */

div.entry a[href^="http://my-chunqiu.cocolog-nifty.com/"]:after {

content: url('http://my-chunqiu.cocolog-nifty.com/images/link2local.png');
margin: 0 0.5em;

}
div.entry a:not([href^="http://my-chunqiu.cocolog-nifty.com/"]):after {

content: url('http://my-chunqiu.cocolog-nifty.com/images/link2www.png');
margin: 0 0.5em;

}
div.entry a[href^="mailto"]:after {

content: url('http://my-chunqiu.cocolog-nifty.com/images/link2email.png');
margin: 0 0.5em;

}
div.entry a[href$=".pdf"]:after {

content: url('http://my-chunqiu.cocolog-nifty.com/images/page-pdf.png');
margin: 0 0.5em;

}
div.entry a[href$=".doc"]:after {

content: url('http://my-chunqiu.cocolog-nifty.com/images/page-word.png');
margin: 0 0.5em;

}
div.entry a[href$=".xls"]:after {

content: url('http://my-chunqiu.cocolog-nifty.com/images/page-excel.png');
margin: 0 0.5em;

}
div.entry a[href$=".txt"]:after {

content: url('http://my-chunqiu.cocolog-nifty.com/images/page-text.png');
margin: 0 0.5em;

}

CSS をそこそこいじった経験のある方なら、何となく察しがつくと思いますが、強調表示されている部分が CSS Level 3 のセレクタ（のごく一部）です。これだけでスタイルの及ぶ全ての要素に対して、適正にアイコンが付与されてしまうわけです。（今、Firefox でこのページをご覧になってる方なら、このページの中央ペインのすべてのリンクにアイコンがついてるのがお分かりいただけるかと思います。）

ここで使っているセレクタは次の通り。

Pattern	Meaning	Section	CSS level
E[foo^="bar"]	an E element whose "foo" attribute value begins exactly with the string "bar"	Attribute selectors	3
E[foo$="bar"]	an E element whose "foo" attribute value ends exactly with the string "bar"	Attribute selectors	3
E:not(s)	an E element that does not match simple selector s	Negation pseudo-class	3

これ以外にも便利なセレクタがたくさんあります。先日、見切り発車で紹介した :target 擬似クラスもその一つです。CSS 3 セレクタについては Lucky bag::blog でも簡単な紹介がすでに出ているようなので、日本語での説明が欲しい方は、そちらを参照されるといいでしょう。もちろん、この Blog でも引き続き便利な CSS Tips を紹介していくつもりです。