![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
CSS3の否定疑似クラス「:not」の使い方
MARKLEAPS
CSS3の否定疑似クラス「:not」の使い方を覚えれば、
コーディングをよりシンプルに書くことが出来ます。
:not とは
css3の否定疑似クラスで、
○○以外に対してスタイルを適用する場合に使います。
:not は以下のように使います。
|
1 2 3 |
:not(セレクタ or クラス) { /* 指定したセレクタorクラス以外に適用するCSS */ } |
:notの使用例
・使用例1：最後のリストだけボーダーを入れたくない場合
これまでの書き方
|
1 2 |
ul li {border-bottom: 1px dotted #000;} ul li:last-child {border-bottom: none;} |
:not を使った書き方
|
1 |
ul li:not(:last-child) {border-bottom: 1px dotted #000;} |
・使用例2：横並びの3の倍数の要素にだけ余白を入れたくない場合
これまでの書き方
|
1 2 3 4 5 6 |
ul li { margin-right: 2%; } ul li:nth-child(3n) { margin-right: 0; } |
:not を使った書き方
|
1 2 3 |
ul li:not(:nth-child(3n)) { margin-right: 2%; } |
![[HTML] detailsとsummaryタグでアコーディオン（開閉）コンテンツを作る](https://markleaps.com/blog/wp-content/uploads/2024/08/html-details_summary-500x254.gif)
![[CSS] font-familyの指定方法](https://markleaps.com/blog/wp-content/uploads/2024/07/css-font-family01-500x254.jpg)
![[HTML] SEOに強いセマンティックコーディングとは](https://markleaps.com/blog/wp-content/uploads/2024/05/html-semantic01-500x254.gif)
![[CSS] カラーコードで透明度を指定する方法](https://markleaps.com/blog/wp-content/uploads/2024/04/css-rrggbbaa01-500x254.jpg)