表示される要素の数に応じてスタイルを変更する

はい、みなさんこんにちは！
今回は要素の数に応じてJSではなくCSSのみで表示スタイルを変更する方法です。

では早速ソースです。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
    :
</ul>

上記のようなHTMLだった場合

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
}

このようなcssを書いてあげることで合計3つの時のスタイルを定義できます。
li要素を一つ目から数えたときに3つ目になる場合
~ を使用することで、後続する2番目〜3番目の要素にも同じスタイルを適応できます。


.item:only-child {
}
/* 1個だけ */


li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
}
/* 2個だけ */


.item:first-child:nth-last-child(3),
.item:first-child:nth-last-child(3) ~ .item {
}
/* 3個だけ */

/*以下略*/

以上です！みなさんもお試しあれ～

Share: