メニューなんかを作っていて、同じ項目を連続させるような場合
下記のようなケースがよくあると思います。

<ul id="foo">
<li>item-1</li> <- ここだけ特別なデザインにしたい！
<li>item-2</li>
<li>item-3</li>
<li>item-4</li>
</ul>

このような場合、本来はCSSの疑似class :first-child を使えばよいのですが、、、

#foo li:first-child { border: none; }

IE6やFirefox2は、CSSに定義された、
この便利な疑似class “:firstchild” をサポートしていません。
(IE7でも不具合があるようです。)


:first-child の利用はあきらめて、

<ul id="foo">
<li class="first-child">item-1</li>
<li>item-2</li>
<li>item-3</li>
<li>item-4</li>
</ul>

なんてことを考えるのですが、システムと連携する場合には
難しい場合があります。

システム側で「始めの要素にだけclassを付与する」なんて機能を
作るとなれば、工数的には本末転倒ですし（泣… 。


これをjavascript で解決してくれるのがoffspring.jsです。

• offspring.js

他のjsとコンフリクトして動作しない場合があります。利用前にテストを行ってください。（2008年11月18日追記）

HTMLを変更せずとも、javascriptが後から自動でclass="first-child"を振ってくれます。

<ul id="foo">
<li>item-1</li> <- javascriptが class="first-child" を振ってくれている
<li>item-2</li>
<li>item-3</li>
<li>item-4</li>
</ul>

HTMLに余計なclassを加えないで、しかし
CSSからは下記のように参照可能となります。

#foo li.first-child { border: none; }

first-child 以外に last-child なんかも使えるようになるので、
デザインの自由度が広がること間違いなしです。

出典

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