トップページの中の セレクタの中の :first-child疑似クラス (E:first-child)

:first-child疑似クラス (E:first-child)

  • 最終更新:2009年7月 5日 17:45

CSS2で定義された:first-child疑似クラスは、ある要素内で最初に書かれている子要素にスタイルが適用されます。リストの場合ul要素内の最初のli要素に適用されるといった具合です。
ちなみに、CSS3で定義された疑似クラスの、:nth-child(1)と同じ扱いになります。

対応ブラウザ
  • IE6未対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

: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種」をご覧ください。

  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ