cssで条件以外の要素に対してスタイルを指定する

最初の要素以外のものにスタイルを適用したいというケースがよくあったのですが、その度にいちいち全体に指定した後、first-childだけを元に戻す、みたいなことをしていました。

そしたら、そんなことせずともできる方法がありました。

:not(selector) {}

:notを使うと引数で渡したselectorに該当しないものが対象となります。

この:notを使えば上でやっていたようなことも簡単にできます。

ul li:not(:first-child) {
    background-color: red;
}

上記の例は、リストの最初の要素以外の背景色を赤くしています。
jsdo.itでサンプルを作りました。

IE8は使えないようなので注意が必要です。