offspring.js

2008/02/06

追記
指摘がありました。 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。

この記事について