使用CSS（LESS）选择与所选元素（已附加唯一类）有关的N个下一个兄弟姐妹

Question

I have HTML code below. Let's say, I'm able to attach the selected-day class by clicking on each span. I'm trying to select the next 6 siblings, starting from the element with the class selected-day . Here's what I have came up with:

 #calendar span.day.selected-day { background-color: red; ~ span:nth-child(n + 6):nth-child(-n + 15) { background-color: red; } } 

 <div id="calendar"> <span class="day">1</span> <span class="day">2</span> <span class="day">3</span> <span class="day">4</span> <span class="day">5</span> <span class="day selected-day">6</span> <span class="day">7</span> <span class="day">8</span> <span class="day">9</span> <span class="day">10</span> <span class="day">11</span> <span class="day">12</span> <span class="day">13</span> <span class="day">14</span> <span class="day">15</span> <span class="day">16</span> </div> 

While it correctly highlights selected days at the beginning:

Whenever I change the selection, it doesn't follow:

Is there any proper way to always select the next 6 sibling in relation to the element with the given class?

Answer 1

Well it doesn't look elegant but you can simply add multiple selectors. Since I don't use less I write the example in native css

#calendar span.day.selected-day + span,
#calendar span.day.selected-day + span + span,
#calendar span.day.selected-day + span + span + span,
#calendar span.day.selected-day + span + span + span + span,
#calendar span.day.selected-day + span + span + span + span + span,
#calendar span.day.selected-day + span + span + span + span + span + span {
    background-color: red;
}

Edit: I tried it in LESS

#calendar span.day.selected-day {
  background-color: red;
  + span,
  + span + span,
  + span + span + span,
  + span + span + span + span,
  + span + span + span + span + span,
  + span + span + span + span + span + span
  {
    background-color: red;
  }
}