REDLINE MAGAZINE

このページは　E:not(s) (打消しの擬似クラス)　のサンプルページです。

最初と最後以外のp要素に背景色をつける例。

class属性の指定されていないp要素だけ背景色をつける例。

class属性を持っているp要素の中で値が「.sample」ではないp要素だけ背景色をつける例。

このサンプルのCSS

#sample1 p:not(:first-of-type):not(:last-of-type){
	background:#fcc; /* 背景色・ピンク */
	}
#sample2 p:not([class]){
	background:#cfc; /* 背景色・うすい緑 */
	}
#sample3 p[class]:not([class="sample"]){
	background:#fc6; /* 背景色・オレンジ */		
	}

このサンプルのHTML

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

<div id="sample2">
<p class="sample">ここはclass属性の指定されたp要素です。</p>
<p>ここはclass属性の指定されていないp要素です。</p>
<p class="sample">ここはclass属性の指定されたp要素です。</p>
<p class="sample">ここはclass属性の指定されたp要素です。</p>
<p>ここはclass属性の指定されていないp要素です。</p>
</div>

<div id="sample3">
<p class="foo">ここはclass属性「foo」の指定されたp要素です。</p>
<p>ここはclass属性の指定されていないp要素です。</p>
<p class="sample">ここはclass属性「sample」の指定されたp要素です。</p>
<p class="bar">ここはclass属性「bar」の指定されたp要素です。</p>
<p>ここはclass属性の指定されていないp要素です。</p>
</div>