[CSS] 否定擬似クラスnot()の使い方

この要素以外はこうしたい。と除外が出来る書き方です。あまり必要ないかな？と思いますが、そうでもないのでシェアします。意外と便利ですよ。

基本形

:not(ここに除外したい要素を記入)

h2:not(.home h2) {border-bottom: solid 3px #999;}

擬似クラス

もちろん、:last-childをはじめとする擬似クラスにも使えます。

li:not(:last-child) {border-bottom: solid 3px #999;}

li:not(:last-of-type) {border-bottom: solid 3px #999;}}

擬似要素と組み合わせる

::beforeやafterなどの擬似要素と:not( ）を一緒に使用する場合は、どの様に書けば良いでしょう？

:not( ）の後に擬似要素を加えます。

あわせて読みたい

[CSS]:befor や :after 擬似要素を活用する 擬似要素:befor は何かの前に何かを表示する事ができます。擬似要素 :after は何かの後ろに何かを表示する事ができます。 htmlでリンクにアイコンを付けたりすると、ソ…

h2の前にFont Awesomeのアイコンを付けるとします。でもTopページのh2には付けたくない場合は。下記の様に書けばOKです。

h2:not(.home h2)::before{
  font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 70%;
    content: "\f02e";
    padding-right: 10px;
  }