Alternating row colors except for duplicates

Question

I've got a sticky situation I need some help with:

I need help coming up with a rule to style alternating background colors, except if there are duplicates of an element, in which case those need to be the same color, without affecting the subsequent elements.

Here's a preview of what that looks like

<section> a </section>               
<section> b </section>               
<section class="dupe"> c1 </section> 
<section class="dupe"> c2 </section>
<section class="dupe"> cn </section> 
<section> d </section>               
<section> e </section>

Here's what we're given:

• This solution needs to be in css.
• The duplicates will all have the same class.
• I'm not allowed to group these things under another <div> to make things easier.
• There will only be one group of duplicate, being the section c's
• As of right now for the current implementation, section c only has a single duplicate of itself (so just c1 and c2 at this point), but there's no guarantee that it will stay that way in the future. I mention this in case there are no solutions, and we have to resort to coding just for the 2 at this point.
• There's also no guarantee that the section c's will always be odd (we might add another section before it which will make section c's even). So we might need a rule for if it's odd and if it's even as well.

Some researching suggested that using the general sibling ~ selector might help, but I could only use that to solve half of the problem, which is making them all the same color.

  section {
    background-color: blue;
  }
  section:nth-of-type(even) {
    background-color: red;
  }
  section:nth-of-type(even) ~ .dupe {
    background-color: red;
  }
  section:nth-of-type(odd) ~ .dupe {
    background-color: blue;
  }

<section> a </section>               
<section> b </section>               
<section class="dupe"> c1 </section> 
<section class="dupe"> c2 </section>
<section class="dupe"> c3 </section>
<section class="dupe"> cn </section> 
<section> d </section>               
<section> e </section>
    
d should be red but it's not, because it's 7th (odd)

Any suggestion would be highly appreciated.

Thanks in advance!

Answer 1

The main logic with this solution is to check whether the first dupe element is followed after an odd element or an even element with a combination of :not() and the general sibling selector ~. Brief explanations can be found in the comments.

section:nth-of-type(even) {
  background-color: red;
}
section:nth-of-type(odd) {
  background-color: blue;
}
.dupe ~ section:nth-of-type(even) {                      
  /* elements after .dupe */
  background-color: blue;
}
.dupe ~ section:nth-of-type(odd) {                       
  /* elements after .dupe */
  background-color: red;
}
section:nth-of-type(even)+.dupe:not(.dupe ~ .dupe) {     
  /* style first .dupe by seeing whether it is immediately next to an even section */
  background-color: blue;
}
section:nth-of-type(even)+.dupe:not(.dupe ~ .dupe) ~ .dupe {
  /* style subsequent .dupe by seeing whether the first .dupe is immediately next to an even section */
  background-color: blue;
}
section:nth-of-type(odd)+.dupe:not(.dupe ~ .dupe) {
  /* style first .dupe by seeing whether it is immediately next to an even section */
  background-color: red;
}
section:nth-of-type(odd)+.dupe:not(.dupe ~ .dupe) ~ .dupe {
  /* style subsequent .dupe by seeing whether the first .dupe is immediately next to an even section */
  background-color: red;
}

<section> a </section>               
<section> b </section>    
<section class="dupe"> c1 </section> 
<section class="dupe"> c2 </section>
<section class="dupe"> c3 </section>
<section class="dupe"> cn </section> 
<section> d </section>               
<section> e </section>

section:nth-of-type(even) {
  background-color: red;
}
section:nth-of-type(odd) {
  background-color: blue;
}
.dupe ~ section:nth-of-type(even) {                      
  /* elements after .dupe */
  background-color: blue;
}
.dupe ~ section:nth-of-type(odd) {                       
  /* elements after .dupe */
  background-color: red;
}
section:nth-of-type(even)+.dupe:not(.dupe ~ .dupe) {     
  /* style first .dupe by seeing whether it is immediately next to an even section */
  background-color: blue;
}
section:nth-of-type(even)+.dupe:not(.dupe ~ .dupe) ~ .dupe {
  /* style subsequent .dupe by seeing whether the first .dupe is immediately next to an even section */
  background-color: blue;
}
section:nth-of-type(odd)+.dupe:not(.dupe ~ .dupe) {
  /* style first .dupe by seeing whether it is immediately next to an odd section */
  background-color: red;
}
section:nth-of-type(odd)+.dupe:not(.dupe ~ .dupe) ~ .dupe {
  /* style subsequent .dupe by seeing whether the first .dupe is immediately next to an odd section */
  background-color: red;
}

<section> a </section>               
<section> b </section>               
<section> c </section>
<section class="dupe"> d1 </section> 
<section class="dupe"> d2 </section>
<section class="dupe"> d3 </section>
<section class="dupe"> dn </section> 
<section> e </section>               
<section> f </section>       
<section> g </section>