要素が一定数以上ある場合に省略表示にする

リスト系のレイアウトで要素が5件以上ある場合など、要素が一定数以上ある場合にCSSで省略表示にする方法をメモ。

サンプルコード

例として要素が5つ以上ある場合に省略する方法を試してみます。

<div class="list">
  <div class="item">青春コンプレックス</div>
  <div class="item">ギターと孤独と蒼い惑星</div>
  〜 略 〜
  <div class="item">なにが悪い</div>
  <div class="omit"><a href="#">もっとみる</a></div>
</div>

.item が4つ未満の場合は通常通りの表示、5つ以上ある場合は.omitを表示した上で5つ目以降を非表示にする想定です。

次にCSSです。

.item:nth-of-type(n + 5) {
	display: none;
}
.omit {
	display: none;
}
.item:nth-of-type(n + 5) ~ .omit {
	display: block;
}

ポイントは.omitの要素の出しわけ方で、:nth-of-type()でX番目以降の.itemを指定した上で、間接セレクタで.omitに対する設定を行なっています。
要素が一定数以上ある場合に省略表示にするデモページ