Perl Web開発者のHTML・CSS入門

first-child疑似クラス - CSS入門【CSS3対応】

first-child疑似クラスは、自分の親から見て、最初の兄弟にスタイルを設定するための疑似的なクラスです。liタグと組み合わせて使われることが多いです。

<style>
  .my_list li:first-child {
    background:#ddd;
  }
</style>

<div class="my_list">
  <ul>
    <li>最初</li>
    <li>次</li>
    <li>最後</li>
  </ul>
</div>

最初のliタグにだけスタイルが適用されます。