○○以外を指定する :notセレクタ

久しぶりにセレクタの話です。

「n番目の要素」や「ホバー時」など、要素を特定するイメージがあるcssセレクタですが、「○○以外」を対象とできる :not というセレクタがあります。

:notの働きはシンプルですが、知っていればcssの削減にもなるのでぜひ覚えておいてください。

:not(否定対象)

仮に、<ul>でナビゲーションを作り、区切り用にliにborder-rightを指定するとします。

このとき

li:not(:last-child){
 border-right: 1px solid;
}

と指定すれば、last-child以外のliにborderを指定できます。
not無しだと

li{
 border-right: 1px solid;
}

li:last-child{
 border-right: none;
}

と２度に分ける必要がありますが、:notセレクタを知っていれば１度でスムーズに指定可能です。

:notセレクタはid クラスにも使える

:not()にはidやクラス名などを含めることもできます。

たとえば

<p class="normal">sample-1</p>
<p>sample-2</p>
<p>sample-3</p>

に

/* .normal以外は太字に　*/
p:not(.normal){
 font-weight: 600;
}

/*　３番目以外のｐタグの色を変更　*/
p:not(:nth-child(3) ){
 color: tomato;
}

と指定してやるとこうなります。

クラスを持たない要素にだけ指定する

上の応用(?)で、:not( [class] )という書き方をすることもできます。

たとえばクラスを持たないulタグだけlist-style:noneにしようと思えば

ul:not([class]) {
  list-style: none;
}

としてやれば良いわけです。

知らなくても困りませんが知っていると便利なセレクタです。