CSSの疑似クラスで要素がn個の時にスタイルを適用する条件を作る

例えば要素が2個の時に最初の要素に対してスタイルを適用したい時を考える。

nth-last-child(2)とすると最後の要素から2番目の意味になるので、
.test:nth-last-child(2):first-childとすると、
最後の要素から2番目の要素が最初の要素だった時となり、つまりこれは要素が2個の時という条件になる。

1
2
3
4

/* 要素が2個しかない時に最初の要素の下線を消す */
.test:nth-last-child(2):first-child {
    border-bottom: none;
}

次は要素が2個しかない時に最後の要素に適用したい時。

1
2
3
4

/* 要素が2個しかない時に最後の要素の下線を消す */
.test:nth-child(2):last-child {
    border-bottom: none;
}

nth-child(2)とすると最初の要素から2番目の意味になるので、
.test:nth-child(2):last-childとすると、
最初の要素から2番目の要素が最後の要素だった時となり、これも要素が2個の時という条件になる。

要素が3個だった時2番目の要素にスタイルを適用する

次は要素が3個で2番目の要素(真ん中)にスタイルを適用する場合を考えてみる。

.test:nth-child(2):nth-last-child(2)とすると、
最初の要素から2番目の要素が最後の要素から2番目だった時となり、要素が3個の時の2番目の要素という条件になる。

1
2
3
4

/* 要素が3個しかない時に2番目の要素の下線を消す */
.test:nth-child(2):nth-last-child(2) {
    border-bottom: none;
}

基本的に最初の要素からと最後の要素からの二つを使って何番目かを指定すれば、要素がn個の時にという条件は達成できそうだ。