子要素が5つ未満の時のcssでの分け方ってありますか？

Question

前提・実現したいこと

ul liで　liの要素が5つ未満の時のcssでの分け方ってありますか？

やりたいこと
liの要素が5つ未満の時は　センター表示
5つ以上の時は左端表示

他に良い方法があったら教えてくだされば幸いです。

該当のソースコード

html
   <ul>
   	<li>要素1</li>
   	<li>要素2</li>
   	<li>要素3</li>
   	<li>要素4</li>
   	<li>要素5</li>
   	<li>要素6</li>
   </ul>
※liの数は上限する


scss
ul{
display: flex;
justify-content: center;
flex-wrap: wrap;

	>li{
		margin-left: 20px;

		&:nth-child(4n) {
		margin-left: 0;
		}
	}
}

Answer 1

ul {
  text-align: center;
}

ul::after {
  content: '';
  display: block;
  clear: both;
}

ul > li {
  display: inline-block;
}

ul > li:nth-last-child(n+5), 
ul > li:nth-last-child(n+5) ~ li {
  float: left;
}

https://developer.mozilla.org/ja/docs/Web/CSS/:nth-last-child

Answer 2

CSSだけでは無理ですね。
JavaScriptを使ってください。

Comments

[shigu]

ご丁寧にありがとうございます。
jsで対応します

[macaron_xxx]

x_xさんのは目から鱗

Answer 3

:has() - CSS: カスケーディングスタイルシートが未実装なため難しいと思います
jsで処理するのが賢明です

Comments

[shigu]

ご丁寧にありがとうございます。
jsで対応します。