offspring.js

2008年2月6日

追記

指摘がありました。
offspring.jsがあっても、IE6とIE7でCSSの擬似クラスを使えないとの事です。
このライブラリはIEのcss実装の不備を補完するものじゃなく、最初の子要素に自動的に追加されます。クラスが追加されるだけで擬似クラスをjsで実装してるわけではないようです。offspring.jsを読み込んでも、cssファイルに書いた、:first-child{….}はie系では無視されます。offspring.jsの作者は、ブラウザ間で実装の有無がある:first-childのような擬似クラスは「使わない」ことを提案しているようです。

今現在、CSSの擬似クラスをサポートしているのはSafari 3だけらしいのですが、IEなどでもCSSの代替え策として最初の子要素に自動的にclassを追加してくれるoffspring.jsをご紹介いたします。

CSSの擬似クラスの説明ですが、特定の要素に対してCSSの擬似クラスを使用すると不必要なIDやClassを使わなくとも、特定の表現ができたりします。例えば以下の擬似クラスなどは便利です。CSS擬似クラスの例を上げると

:first-child

親要素の中で最初に現れる子供要素である場合にだけマッチする

:last-child

親要素の中で最後に現れる子供要素である場合にだけマッチする

:nth-child(#)

親要素の中で #番目の子要素だけにマッチする

その他にも:nth-child(even)や:only-child等かなり色々あります。詳しい解説についてはWWW　WATCHさんのCSS セレクタに関するおさらい 2が丁寧にわかりやすく解説されています。

しかし現状では、IE6やIE7ではこのような擬似クラスはサポートされていません。そこでA List Apartで紹介されているKeeping Your Elements’ Kids in Line with Offspringの記事の中のoffspring.jsを使用する事でIE6やIE7でCSS擬似クラスの代替えとして使用することができます。Googlecodeに掲載されているサバージョンoffspringjsを直接ヘッダー内で外部スクリプトとして読み込めばOK。