CSS pseudo-selectors to dynamic classes Vue v-for Grid - css

Question

I have this div that will make a calendar, the v-for renders days depending of the month.
Also, there are dynamic classes binded by the :class="classesDay(day)".
One of that classes is ".selectable_dates" and it shows only when I click on any day of the month, and it will have the next 5 days as selectable_dates.
<div class="days_grid">
<div
v-for="(day, idx) in cal.monthDaysList"
:key="idx"
class="days_grid_item"
:class="classesDay(day)"
#click="selectDates(day)"
>
<div class="days_grid_item_inside" :class="classesDayInside(day)">
<p>
{{ day && day.date }}
</p>
</div>
<div class="days_grid_item_bg"></div>
</div>
</div>
in CSS I have this:
.days_grid > .selectable_dates:first-child {
color: red;
}
But that :first-child selector doesn't make anything, if I put just .days_grid > .selectable_dates, it will show all the texts in red, but I just need the first child to be in red.
I don't know if it is because that class is dynamic or what, but I can't make it work.
The code that put the classes dynamically is below:
classesDay(day) {
return {
selectable_dates:
this.fromDate !== null &&
this.toDate === null &&
day.Date >= this.fromDate.Date &&
day.Date <= this.maxDate,
};