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


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

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

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

:not(否定対象)

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

  • A
  • B
  • C
  • D
  • E

このとき

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

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

li{
 border-right: #fff 1px solid;
}
li:last-child{
 border-right: none;
}

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

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

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

たとえば

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

/* .normal以外は太字に */
p:not(.normal){
 font-weight: bold;
}
/* 3番目以外のpタグの色を変更 */
p:not(:nth-child(3)){
 color: tomato;
}

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

sample-1

sample-2

sample-3

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

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

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

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

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

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

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年3月23日HTML/CSSnot,セレクタ,疑似要素

Posted by ミフネWEB