:first-child 擬似クラス

要素:first-child
・親要素の中で、一番最初に現れる子供要素であり、かつ最初の１つだけがマッチする。
　(例）div p:first-child {･･･}　･･･親要素DIV内で、P要素が一番最初の子要素の
　　　　　場合のみ、最初のP要素だけにマッチする

<h3>1行目のh3</h3>

<h3>2行目のh3</h3>

左のDIV要素内でp:first-child {color:green}としても「１行目のｐ」には反映しない。ｐが最初の子要素でないからだ（最初のｐに適用されるわけではないのだ）。
h3:first-child {color:green}なら、「１行目のh3」に反映する。h3が先頭子要素だから。

p:first-child {color:green}は「親要素内で、ｐが一番最初の子要素であり、かつその最初のｐだけに適用されるされる」という意味だ（チョット、ややこしい)。

Sample

ワースト 10
日本米国中国	大阪東京福岡

これはfirst-childのテストです

2つめのP

3つめのP

Sample Source......................................................................>>>

<style type="text/css">
　div.dv1 h3:first-child {color:green}
　div.dv1 p:first-child {color:green}
　table ol li:first-child {font:italic bold x-large "ＭＳ 明朝";color:green}
　div.dv2 p:first-child {color:blue}
　div.dv2 p:first-child span {color:red}
</style>
</head>

<body>
<table border="1">
<caption>ワースト 10</caption>
    <tr>
      <td>
      <ol>
        <li>日本
        <li>米国
        <li>中国
      </ol>
      </td>
      <td>
      <ol>
        <li>大阪
        <li>東京
        <li>福岡
      </ol>
      </td>
    </tr>
</table>

<diV class="dv2" style="width:300px;border:1px solid navy">
　　<p>これは<span>first-child</span>の<span>テスト</span>です</p>
　　<p>2つめの<span>P</span></p>
　　<p>3つめのP</p>
</div>