リストでテキストを並べ、一部をハイライト表示する場合、普通は次のサンプル(1)のようなCSSを使います。ハイライトさせるliのスタイルを適用する前に、すべてのliエレメントのスタイルを宣言しています。

サンプル(1)

.sample01 ul li  {
	color: #666; background: #fff;
	}
.sample01 ul li.check01  {
	color: #333; background: #fcf;
	}

 

:not疑似要素を使うと、このliエレメントのスタイル宣言が不要になり、ハイライト表示するliエレメントとそれ以外のliエレメントというように、関係が同列で明確になります。

サンプル(2)

.sample02 ul li:not(.check02)   {
	color: #666; background: #fff;
	}
.sample02 ul li.check02  {
	color: #333; background: #fcf;
	}

 

「CSS3 :not疑似クラスを使って、エレメントの関係を同列で明確に(2)」に続きます。
戻るボタン