ここはp要素でマークアップしてある最初のテキストです。
ここはp要素でマークアップしてある2つ目のテキストです。
ここはp要素でマークアップしてある3つ目のテキストです。
ここは最初のp要素です。ここはstrongでマークアップされています。
ここは2つ目のp要素です。ここはstrongでマークアップされています。
ここは3つ目のp要素です。ここはstrongでマークアップされています。
#sample1 :first-child{
background:#cfc; /* 背景色・うすい緑 */
}
#sample2 p:first-child strong{
color:red;
font-weight:bold;
}
#sample3 li:first-child{
background:#fcc; /* 背景色・ピンク */
}
<div id="sample1">
ここはマークアップされていない生テキストです。
<p>ここはp要素でマークアップしてある最初のテキストです。</p>
<p>ここはp要素でマークアップしてある2つ目のテキストです。</p>
<p>ここはp要素でマークアップしてある3つ目のテキストです。</p>
</div>
<div id="sample2">
<p>ここは最初のp要素です。<strong>ここはstrongでマークアップされています。</strong></p>
<p>ここは2つ目のp要素です。<strong>ここはstrongでマークアップされています。</strong></p>
<p>ここは3つ目のp要素です。<strong>ここはstrongでマークアップされています。</strong></p>
</div>
<ol id="sample3">
<li>ここは1番目の要素です。</li>
<li>ここは2番目の要素です。</li>
<li>ここは3番目の要素です。</li>
<li>ここは4番目の要素です。</li>
<li>ここは5番目の要素です。</li>
</ol>