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

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

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の擬似要素を使って最後以外に適用させればできると考えた。
 

 

普通にcssを書いてみると、
 

 

これで、”1,2,3,4,5,”と表示される。
 

そんな時に、最後以外のセレクタがあればいいのに・・・そんな便利な命令はどうやら存在しないようだ。

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

上記のCSSに1要素追加して対応してみた。
 

 

とりあえず、これで”1,2,3,4,5″と、最後以外にafterが適用できた・・・
 

でも、なんだか釈然としない、スマートなやり方ではないからだ・・・

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

色々と試しているうちに以下の方法で1発でできることを発見。
 

 

“not”を使って最後以外が実現できました。
 

めでたしめでたし!

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です