Different styles depending on the number of elements (HTML + CSS)

different_styles.html

<div class="parent">
    <div class="child">111</div>
    <div class="child">222</div>
    <div class="child">333</div>
    <div class="child">444</div>
    <div class="child">555</div>
    <div class="child">666</div>
  </div>
  
<style>
   /* Стиль если 1 элемент */
  .child:first-child:nth-last-child(n + 1),
  .child:first-child:nth-last-child(n + 1) ~ .child {
    background: orange;
  }
  
  /* Стиль если 2 элемента */
  .child:first-child:nth-last-child(n + 2),
  .child:first-child:nth-last-child(n + 2) ~ .child {
    background: blue;
  }
  
  /* Стиль если 3 элемента */
  .child:first-child:nth-last-child(n + 3),
  .child:first-child:nth-last-child(n + 3) ~ .child {
    background: green;
  }
  
  /* Стиль если 4 и больше элементов */
  .child:first-child:nth-last-child(n + 4),
  .child:first-child:nth-last-child(n + 4) ~ .child {
    background: grey;
  }
</style>