Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

CSS

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

INDEX

基本形

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

例:h2に下線を表示。でもTopページのh2にはこの装飾を付けたくない

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( )の後に擬似要素を加えます。

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;
  }

\この記事がお役にたったら/

広告を減らしサイトを見やすくする予定です

cocotiieの運営をサポートして頂ければ嬉しいです

「金額を入力」で1円から入力できます

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX