CSSの記述でできるだけシンプルに分かりやすくコーディングする方法をご紹介します。また今後の参考にしてみてください。
1.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: ","; }
2.:nth-childにはマイナスも指定できる。
li { display: none; } /* 最初から3番目まで表示する */ li:nth-child(-n+3) { display: block; }またnot()と組み合わせたりもできる。
/* 最初から3番目以外を非表示にする */ li:not(:nth-child(-n+3)) { display: none; }