【CSS】擬似クラス:not()があまりにも素敵すぎでしょう、君ぃ！

CSSの小ネタです。最近その存在を知ったのですが、CSSの擬似クラス:not()ってのが素敵すぎでしょう！と感動したのでご紹介。

CSSの基本はこちら

※参考：【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 - クモのようにコツコツと

一部の要素に余計なものが…

例えばこんなリストがあるとする。コーポレートサイトのグローバルメニューみたいな。

<nav>
    <ul >
        <li><a href="hoge">ホーム</a></li>
        <li><a href="hoge">ニュース</a></li>
        <li><a href="hoge">会社概要</a></li>
        <li><a href="hoge">商品紹介</a></li>
        <li><a href="hoge">採用情報</a></li>
        <li><a href="hoge">お問い合わせ</a></li>
    </ul>
</nav>

そんでもって、このメニューは右よせで横並びしているとする。

メニューとメニューの間には「 | 」で区切りたい。

nav li::before {
    content: " | ";
}

擬似要素::beforeをつけると「li要素の前（左側）に擬似要素（content）の文字列|を追加する」という意味になります。でもこのままだと一番先頭の「ホーム」の前にも|が入ってしまう。先頭だけはこれはいらんわな。

「○番目」系の擬似クラス

これまでは:nth-child(1)や:first-childなどの擬似クラスで擬似要素（content）を消す設定を上書きする必要があった。

nav li::before {
    content: " | ";
}

nav li:nth-child(1)::before {
    content: none;
}

下に追記したのは「1番目のli要素の前の擬似要素contentをnoneにする」という意味になります。
ちなみに擬似クラスと擬似要素を二重で指定する時は「擬似クラス→擬似要素」の順番になります。

:not()を使うとシンプル！！

ところが！なんということでしょう。
擬似クラス:not()を使うとこの二重指定が不要になるのです！！

nav li:not(:first-child)::before {
    content: " | ";
}

:not()は「カッコの中以外」という意味になり、「一番目以外のli要素の前に擬似要素contentの文字列|を追加する」という意味になります。

最後に

擬似クラス:not()を使うと、工夫次第でこれまで二重に指定していた値を削減できそうです。
例えば表の一番最最初の行だけ線がいらないよ、とか、段落の一番最後だけ余白がいらないよ、とか。
積極的に使っていきたいと思います！

※参考：ネイティブHTML & CSSやってみたシリーズ
qiita.com