CSS3 :not()擬似クラスを使って、表示する画像ファイルの拡張子を選別

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

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

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

 .sample02 img:not([src$=".png"]) {
	display:none;
	}

サンプル（３）は、やはり同じボックスを使い、拡張子「.png」と「.jpg」を否定（=それ以外の「.gif」を選択）して、濃いピンクのボーダーを付けています。

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