Select last 3 children based on the number of children - html

Question

I'm in a situation where the number of elements shown is variable, and I need solution which I'm not able to achieve, I even doubt if it's possible only with CSS.
I want to make a selection on the last four items only when the total items are 7. the my current CSS gives right result for 7 items but not for an another amount.
how can I combine that so that it looks for nth-last-child(7) and flex-item:nth-child(n+5)?
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding: 0;
margin: 0;
list-style: none;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
.flex-item:first-child:nth-last-child(7),
.flex-item:first-child:nth-last-child(7)~.flex-item:nth-child(-n+4) {
flex-basis: 23%;
}
.flex-item:nth-last-child(7)~.flex-item:nth-child(n+5) {
flex-basis: 31%;
background: blue;
}
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
</ul>

Answer 1

Is this what you are looking for?
.flex-item:first-child:nth-last-child(7)
targets the first child when there are only 7 items so that
.flex-item:first-child:nth-last-child(7)~.flex-item:nth-child(n+5)
is only triggered when there are 7 items
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding: 0;
margin: 0;
list-style: none;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
.flex-item:first-child:nth-last-child(7),
.flex-item:first-child:nth-last-child(7)~.flex-item:nth-child(-n+4) {
flex-basis: 23%;
}
.flex-item:first-child:nth-last-child(7)~.flex-item:nth-child(n+5) {
flex-basis: 31%;
background: blue;
}
<ul class="flex-container">
<li class="flex-item first">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
</ul>
<br/><br/>
<ul class="flex-container">
<li class="flex-item first">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
<li class="flex-item">9</li>
<li class="flex-item">10</li>
</ul>
<br/><br/>
<ul class="flex-container">
<li class="flex-item first">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>