REDLINE MAGAZINE

このページは　E + F (直接隣接結合子)　のサンプルページです。

h4要素の直後にp要素が出現する場合だけマージンを変更する例。

兄弟の弟が続く場合は別の要素が入って途切れるまでマッチする例。

1つ目のli要素だけ幅100%、残りのliは2カラムにする例。

このサンプルのCSS

p{
	margin:3px auto;
	}	
#sample1 h4 + p{
	margin:12px auto 3px;
	}
#sample2 p + p{
	background:#fcc; /* 背景色・ピンク */
	}

#sample3 li{
	width:790px;
	height:50px;
	background:#cfc; /* 背景色・うすい緑 */
	border:1px solid #000;
	margin:5px;
	}
#sample3 li + li{
	width:388px;
	float:left;
	display:inline;
	background:#fc6; /* 背景色・オレンジ */
	}

このサンプルのHTML

<div id="sample1">
<p>ここは#sample1の中のp要素です。</p>
<h4>ここは#sample1の中のh4要素です。</h4>
<p>ここは#sample1の中のp要素です。</p>
<p>ここは#sample1の中のp要素です。</p>
</div>

<div id="sample2">
<p>ここは#sample2の中のp要素です。</p>
<p>ここは#sample2の中のp要素です。</p>
<p>ここは#sample2の中のp要素です。</p>
<p>ここは#sample2の中のp要素です。</p>
<h4>ここは#sample2の中のh4要素です。</h4>
<p>ここは#sample2の中のp要素です。</p>
</div>

<div id="sample3">
<ul>
<li>ここは1番目の要素です。</li>
<li>ここは2番目の要素です。</li>
<li>ここは3番目の要素です。</li>
<li>ここは4番目の要素です。</li>
<li>ここは5番目の要素です。</li>
<li>ここは5番目の要素です。</li>
</ul>
</div>