CSSの擬似クラス:IE6/IE7でも使う方法あります

後藤大地(オングス)
2008-02-06 12:46:01
  • このエントリーをはてなブックマークに追加

 CSSには擬似クラス(pseudo-classes)という指定がある。:first-child、:last-child、:nth-child(#)、:nth-child(odd)、:nth-child(even)、:only-childなどの擬似クラスのことで、これを活用するとHTMLに特別なidやclass指定を追加しなくとも、CSS側だけでスマートな表記ができるようになる。

 たとえば、特定の要素に対してのみ例外的な指定をしたい場合などに便利な機能で、要素の先頭や末尾など例外的な処理が必要となる場合に重宝する。

 擬似クラスは便利な機能だが、IE6、IE7、Firefox 2、Opera 9.xなどのブラウザでほとんど実装されていないという問題がある。今のところこれらの指定が機能するのはSafari 3くらいだ。

 そこでAlex Bischoff氏がA List Apartで公開したドキュメントKeeping Your Elements' Kids in Line with Offspringを紹介したい。同氏はこのドキュメントでoffspring.jsを使う方法を紹介している。

 offspring.jsは擬似クラスを動作するようにするためのJavaScriptライブラリ。offspring.jsにはすべての擬似クラスを実装したfullモードと、:first-child、:last-child、:only-childのみをサポートしたlightモードがある。実行速度を気にする場合、lightモードを使えば利便性と高速性の両方を両立できるという寸法だ。

 Keeping Your Elements' Kids in Line with Offspringには、それ以外にもHTMLとCSSの記述をシンプルに、そしてスマートにするための方法がまとまっている。

  • 新着記事
  • 特集
  • ブログ