同じ親を持つp要素の中で最初の要素だけ背景色を変える例。

ここはdiv#sample1という親をもつh4要素です。

ここはdiv#sample1という親を持つ1番目のp要素です。

ここはdiv#sample1という親を持つ2番目のp要素です。

ここはdiv#sample1という親をもつh4要素です。

ここはdiv#sample1という親を持つ3番目のp要素です。

ここはdiv#sample1という親を持つ4番目のp要素です。

ここはdiv#sample1という親を持つ5番目のp要素です。

このサンプルのCSS

#sample1 p{
	background:#cfc; /* 背景色・うすい緑 */
	}
#sample1 p:first-of-type{
	background:#fcc; /* 背景色・ピンク */
	}

このサンプルのHTML

<div id="sample1">
<h4>ここはdiv#sample1という親をもつh4要素です。</h4>
<p>ここはdiv#sample1という親を持つ1番目のp要素です。</p>
<p>ここはdiv#sample1という親を持つ2番目のp要素です。</p>
<h4>ここはdiv#sample1という親をもつh4要素です。</h4>
<p>ここはdiv#sample1という親を持つ3番目のp要素です。</p>
<p>ここはdiv#sample1という親を持つ4番目のp要素です。</p>
<p>ここはdiv#sample1という親を持つ5番目のp要素です。</p>
<!--/sample1--></div>