REDLINE MAGAZINE

このページは　E F (子孫結合子) / E > F (子結合子)　のサンプルページです。

E F (子孫結合子)は子孫要素に適応、E > F (子結合子)は直接の子に適応

このサンプルのCSS

#sample1 strong{
	background:#cfc; /* 背景色・うすい緑 */
	}
#sample1>strong{
	background:#cfc; /* 背景色・うすい緑 */
	}
#sample3 p>strong{
	background:#cfc; /* 背景色・うすい緑 */
	}

このサンプルのHTML

<div id="sample1">
<p>(#sample1) <br />
「#sample1 strong」に背景色を指定しています。<br />
あいうえお<strong>かきくけこさしすせそ</strong>たちつてとあいうえお<strong>かきくけこさしすせそ</strong>たちつてと</p>
</div>

<div id="sample2">
<p>(#sample2)<br />
「#sample2>strong」に背景色を指定しています。(strong要素は直接の子ではないので背景色はつきません)<br />
あいうえお<strong>かきくけこさしすせそ</strong>たちつてとあいうえお<strong>かきくけこさしすせそ</strong>たちつてと</p>
</div>

<div id="sample3">
<p>(#sample3)<br />
「#sample3 p>strong」に背景色を指定しています。<br />
あいうえお<strong>かきくけこさしすせそ</strong>たちつてとあいうえお<strong>かきくけこさしすせそ</strong>たちつてと</p>
</div>