要素の数でスタイルを変えるCSS

要素をシステム側で動的に出していて、
それを個数が変わっても対応できるようにCSSだけで書けないかと思い
調べてみたらありました。

See the Pen 子要素の数でスタイルを変えるcss by takapen (@takapen) on CodePen.

「最後からn番目の要素」と、「n番目の要素の兄弟要素」に合致するという書き方です。
例えばサンプルだと、要素が4個の場合、当てはまらないので何もスタイルが適用されないです。



HTML

CSS

/* 1個の場合 */
.item:only-child {
  color: #a00;
}
/* 2個の場合 */
.item:first-child:nth-last-child(2),
.item:first-child:nth-last-child(2) ~ .item {
  color: #0a0;
}
/* 3個の場合 */
.item:first-child:nth-last-child(3),
.item:first-child:nth-last-child(3) ~ .item {
  color: #00a;
}

参考：要素の個数に応じてスタイルを出し分けるCSSメモ - Qiita