REDLINE MAGAZINE

このページは　E[foo~="bar"] (属性選択子)　のサンプルページです。

classの複数付けの1つにマッチさせたい場合の例。

ここはclass="sampleA"というclassのついたpです。

ここはclass="sampleA sampleB"という2つのclassのついたpです。

ここはclass="sampleB"というclassのついたpです。

ここはclass="sampleB sampleC"という2つのclassのついたpです。

このサンプルのCSS

p[class~="sampleB"]{
	background:#fcc; /* 背景色・ピンク */
	}
p[class~="sampleB"][class~="sampleC"]{
	background:#cfc; /* 背景色・うすい緑 */
	}

このサンプルのHTML

<p class="sampleA">ここはclass="sampleA"というclassのついたpです。</p>
<p class="sampleA sampleB">ここはclass="sampleA sampleB"という2つのclassのついたpです。</p>
<p class="sampleB">ここはclass="sampleB"というclassのついたpです。</p>
<p class="sampleB sampleC">ここはclass="sampleB sampleC"という2つのclassのついたpです。</p>