Is there a way to apply CSS styles between two siblings?

Question

To ask my question in some context, I have 12 sections that separate each other, each of which represents the month of the month. Either 0, 1, or 2 of these sections can be selected at a given time. When selected, the "active" class is applied to this div. When two divs are selected, I would like to apply style to all divs between the two selected.

eg.

<div class="month">Jan</div> <div class="month active">Feb</div> <div class="month">Mar</div> <div class="month">Apr</div> <div class="month">May</div> <div class="month">Jun</div> <div class="month active">Jul</div> <div class="month">Aug</div> <div class="month">Sep</div> <div class="month">Oct</div> <div class="month">Nov</div> <div class="month">Dec</div> 

So, in the above snippet, I would like to apply the CSS style to the active months, as well as all the intervals between the months. Is this possible in CSS, or am I better with JS?

EDIT:

This does not work, but I think it might be on the right track.

 .month.active ~ .month { background-color: $color-lighter-text; color: #fff; } .month.active:nth-child(2) ~ .month { background-color: #fff !important; color: $color-muted-text !important; } 

Answer 1

You can select all .month elements following the first .active element, and then override this style by selecting all .month elements that follow the second .active element:

 .month.active ~ .month, .active { color: #f00; } .month.active ~ .month.active ~ .month { color: initial; } 

 <div class="month">Jan</div> <div class="month active">Feb</div> <div class="month">Mar</div> <div class="month">Apr</div> <div class="month">May</div> <div class="month">Jun</div> <div class="month active">Jul</div> <div class="month">Aug</div> <div class="month">Sep</div> <div class="month">Oct</div> <div class="month">Nov</div> <div class="month">Dec</div> 

However, if you want a cleaner solution, I would suggest using JS and adding the .active class to all the elements for which you want to target.

If you are using jQuery, you can simply use the .nextUntil() method:

 $('.month.active:first').nextUntil('.active').addClass('active'); 

 $('.month.active:first').nextUntil('.active').addClass('active'); 

 .month.active { color: #f00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="month">Jan</div> <div class="month active">Feb</div> <div class="month">Mar</div> <div class="month">Apr</div> <div class="month">May</div> <div class="month">Jun</div> <div class="month active">Jul</div> <div class="month">Aug</div> <div class="month">Sep</div> <div class="month">Oct</div> <div class="month">Nov</div> <div class="month">Dec</div> 

Answer 2

You need to use common selector functions: ~

 <div class="month">Jan</div> <div class="month active">Feb</div> <div class="month">Mar</div> <div class="month">Apr</div> <div class="month">May</div> <div class="month">Jun</div> <div class="month active">Jul</div> <div class="month">Aug</div> <div class="month">Sep</div> <div class="month">Oct</div> <div class="month">Nov</div> <div class="month">Dec</div> .month {background: red;} .month.active {background: blue;} .month.active ~ .month {background: blue;} .month.active ~ .month.active ~ .month {background: red;} 

Answer 3

Due to the cascading nature of CSS, an element prior to .active cannot effectively target a .active's link. I added the .prev class to the element before .active , and then used the adjacent sibling + selector when referencing .active to the element after it.

Bad, you need months between them so that you can do this with a more illegible ~ . Updated to reflect the OP request, but probably the same solution as some before me, sorry: - \

 .month.active { background-color: orange; } .month.active ~ .month { background-color: orange; } .month.active ~ .month.active ~ .month { background-color: white; } 

 <div class="month">Jan</div> <div class="month active">Feb</div> <div class="month">Mar</div> <div class="month">Apr</div> <div class="month">May</div> <div class="month">Jun</div> <div class="month active">Jul</div> <div class="month">Aug</div> <div class="month">Sep</div> <div class="month">Oct</div> <div class="month">Nov</div> <div class="month">Dec</div>