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

2018年11月3日

CSS テクノロジー

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

nth-childのやりかた色々

3番目

:nth-child(3)

3の倍数

:nth-child(3n)

奇数のみ

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

偶数のみ

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

最初の3つ

:nth-child(-n+3)

3番〜10番までを選択

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

1発セレクタでTRY(こっちがオススメ)

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

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。