:first-child疑似クラス (E:first-child)
CSS2で定義された:first-child疑似クラスは、ある要素内で最初に書かれている子要素にスタイルが適用されます。リストの場合ul要素内の最初のli要素に適用されるといった具合です。
ちなみに、CSS3で定義された疑似クラスの、:nth-child(1)
と同じ扱いになります。
- 対応ブラウザ
-
:first-child疑似クラスのサンプル
ul {
margin: 50px 20px;
padding: 5px 0;
text-align: center;
border: 1px solid #999;
}
ul li {
display: inline;
margin-left: 5px;
padding-left: 10px;
border-left: 1px solid #666;
}
ul li:first-child {
margin-left: 0;
padding-left: 0;
border-left: 0;
}
<ul>
<li><a href="/">トップページ</a></li>
<li><a href="/utility/about.shtml">サイト説明</a></li>
<li><a href="/utility/profile.shtml">運営者</a></li>
<li><a href="/utility/contact.shtml">お問い合わせ</a></li>
<li><a href="/utility/sitemap.shtml">サイトマップ</a></li>
</ul>
ありがちなフッターなどを横並びにしたリストです。最初のli要素だけ別のスタイルが適用されるようにしています。
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
この:first-child疑似クラスにIE6が対応していればとても便利ですが、残念ながら対応していないため、対応するにはJSを使う必要が有ります。
この方法に関しては、CSS HappyLifeの「フッターとかの区切り『|』のサンプル1種」をご覧ください。