リストでテキストを並べ、一部をハイライト表示する場合、普通は次のサンプル（１）のようなCSSを使います。ハイライトさせるliのスタイルを適用する前に、すべてのliエレメントのスタイルを宣言しています。
サンプル（１）
.sample01 ul li {
color: #666; background: #fff;
}
.sample01 ul li.check01 {
color: #333; background: #fcf;
}
- ダミーテキストダミーテキストダミーテキストダミーテキスト
- ダミーテキストダミーテキストダミーテキストダミーテキスト
- ダミーテキストダミーテキストダミーテキストダミーテキスト
- ダミーテキストダミーテキストダミーテキストダミーテキスト
- ダミーテキストダミーテキストダミーテキストダミーテキスト
:not疑似要素を使うと、このliエレメントのスタイル宣言が不要になり、ハイライト表示するliエレメントとそれ以外のliエレメントというように、関係が同列で明確になります。
サンプル（２）
.sample02 ul li:not(.check02) {
color: #666; background: #fff;
}
.sample02 ul li.check02 {
color: #333; background: #fcf;
}
- ダミーテキストダミーテキストダミーテキストダミーテキスト
- ダミーテキストダミーテキストダミーテキストダミーテキスト
- ダミーテキストダミーテキストダミーテキストダミーテキスト
- ダミーテキストダミーテキストダミーテキストダミーテキスト
- ダミーテキストダミーテキストダミーテキストダミーテキスト
「CSS3 :not疑似クラスを使って、エレメントの関係を同列で明確に（２）」に続きます。
