CSS3 :not()擬似クラスは、否定型の擬似クラスで、括弧内に指定したセレクタ以外を選択するセレクタです。
関連ページ→「CSS3 not疑似クラスを使って、エレメントの関係を同列で明確に(1)」

サンプル(1)は、divボックスの中に、3種類のフォーマット「.png」「.jpg」「.gif」の画像がそれぞれ3点ずつ計9つの画像が入っています。

この画像の入ったボックスと同じものを使い、画像を選別し、png以外を非表示にしたものが、サンプル(2)になります。:not()擬似クラスによって、拡張子「.png」を否定(=それ以外の「.jpg」と「.gif」を選択)して、非表示にしています。

サンプル(2)CSSソース

 .sample02 img:not([src$=".png"]) {
	display:none;
	}
サンプル(3)は、やはり同じボックスを使い、拡張子「.png」と「.jpg」を否定(=それ以外の「.gif」を選択)して、濃いピンクのボーダーを付けています。

サンプル(3)CSSソース

 .sample03 img:not([src$=".png"]):not([src$=".jpg"]) {
	border:2px solid deeppink;
	}

サンプル(1)

サンプル(2)

サンプル(3)

※参照元:http://www.marguerite.jp/Nihongo/WWW/RefCSS/Selectors/Pseudo/not.html
戻るボタン