[CSS] 複数ある子要素の最後以外に適用させる方法

cssのセレクタで便利にWEBサイトの装飾コントロールをやっていたところ、子要素の最後以外に対する適用が出来なくて困った。 最初のみを除外する場合は、"nth-child(n+1)"とすれば２番目以降に適用されるのに、「最後以外」ができない。 セレクタは非常によく考えられたシステムなのに、たまに出来ないこともある。 そんな、「最後以外」のやり方を自分なりにやってみました。

nth-childのやりかた色々

３番目

:nth-child(3)

３の倍数

:nth-child(3n)

奇数のみ

:nth-child(odd) :nth-child(2n+1)

偶数のみ

:nth-child(even) :nth-child(2n)

最初の３つ

:nth-child(-n+3)

３番〜１０番までを選択

:nth-child(n+3):nth-child(-n+10)

最後以外を選択したい理由

下記のようなDOM構造があり、"1,2,3,4,5"という風に表示させたい時に、:afterの擬似要素を使って最後以外に適用させればできると考えた。 <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> 普通にcssを書いてみると、 div > span:after{ content:","; } これで、"1,2,3,4,5,"と表示される。 そんな時に、最後以外のセレクタがあればいいのに・・・そんな便利な命令はどうやら存在しないようだ。

最後にブランクを上書き方法

上記のCSSに１要素追加して対応してみた。 div > span:after{ content:","; } div > span:last-child:after{ content:""; } とりあえず、これで"1,2,3,4,5"と、最後以外にafterが適用できた・・・ でも、なんだか釈然としない、スマートなやり方ではないからだ・・・

１発セレクタでTRY（こっちがオススメ）

色々と試しているうちに以下の方法で１発でできることを発見。 div > span:not(:last-child):after{ content:","; } "not"を使って最後以外が実現できました。 めでたしめでたし！