CSS3の否定疑似クラス「:not」の使い方

MARKLEAPS

2021.05.13

CSS3の否定疑似クラス「:not」

CSS3の否定疑似クラス「:not」の使い方を覚えれば、
コーディングをよりシンプルに書くことが出来ます。

css3の否定疑似クラスで、
○○以外に対してスタイルを適用する場合に使います。

:not は以下のように使います。

:not(セレクタ or クラス) {
  /* 指定したセレクタorクラス以外に適用するCSS */
}

:not(セレクタ or クラス) {

/* 指定したセレクタorクラス以外に適用するCSS */

}

・使用例1：最後のリストだけボーダーを入れたくない場合

これまでの書き方

ul li {border-bottom: 1px dotted #000;}
ul li:last-child {border-bottom: none;}

1 2	ul li {border-bottom: 1px dotted #000;} ul li:last-child {border-bottom: none;}

:not を使った書き方

ul li:not(:last-child) {border-bottom: 1px dotted #000;}

1	ul li:not(:last-child) {border-bottom: 1px dotted #000;}

・使用例2：横並びの3の倍数の要素にだけ余白を入れたくない場合

これまでの書き方

ul li {
	margin-right: 2%;
}
ul li:nth-child(3n) {
	margin-right: 0;
}

ul li {

margin-right: 2%;

}

ul li:nth-child(3n) {

margin-right: 0;

}

:not を使った書き方

ul li:not(:nth-child(3n)) {
	margin-right: 2%;
}

ul li:not(:nth-child(3n)) {

margin-right: 2%;

}

CSS

よく読まれている関連記事