CSS　:not()や:nth-child にマイナスを指定する

CSSの記述でできるだけシンプルに分かりやすくコーディングする方法をご紹介します。また今後の参考にしてみてください。

１．borderを指定してからlast-childで最後のborderだけを非表示にする。

/* add border */
 .nav li { border-right: 1px solid #666; }

/* remove border */
 .nav li:last-child { border-right: none; }

と、このように書くより:not()を使ったほうがシンプルに書ける。↓↓↓

.nav li:not(:last-child) { border-right: 1px solid #666; }

他にもnotを使って、liのアイテムににカンマ区切りをいれてみると

ul li:not(:last-child)::after { content: ","; }

 

２．:nth-childにはマイナスも指定できる。

li { display: none; }

/* 最初から3番目まで表示する */
 li:nth-child(-n+3) { display: block; }

またnot()と組み合わせたりもできる。

/* 最初から3番目以外を非表示にする */
 li:not(:nth-child(-n+3)) { display: none; }