CSS nth-of-type; but how to only effect types directly in series

Question

Let's say we have a list of items, with splitter elements (<h3>), for example dates :

<h2>Big Header</h2>
<div id='container'>
    <h3>Week Title A</h3>
    <span>Day 1</span>
    <span>Day 2</span>
    <span>Day 3</span>
    <span>Day 4</span>
    <span>Day 5</span>
    <span>Day 6</span>
    <span>Day 7</span>
    <h3>Week Title B</h3>
    <span>Day 1</span>
    <span>Day 2</span>
    <span>Day 3</span>
    <span>Day 4</span>
    <span>Day 5</span>
    <span>Day 6</span>
    <span>Day 7</span>
</div>

And lets say we have a CSS style that is applied to Even <span>s, like so:

#container span:nth-of-type(even){
    color: red;
}

This will produce the following output:

   /** layout / setup only **/
   #container {
      background-color: aqua;
      margin:1rem;
      padding:1rem;
   }
   span {
      display:block;
    }


   /** This below is the focus **/
   #container span:nth-of-type(even){
        color: red;
        font-weight:bold;
    }

    <h2>Big Header</h2>
    <div id='container'>
        <h3>Week Title A</h3>
        <span>Day 1</span>
        <span>Day 2</span>
        <span>Day 3</span>
        <span>Day 4</span>
        <span>Day 5</span>
        <span>Day 6</span>
        <span>Day 7</span>
        <h3>Week Title B</h3>
        <span>Day 1 B</span>
        <span>Day 2</span>
        <span>Day 3</span>
        <span>Day 4</span>
        <span>Day 5</span>
        <span>Day 6</span>
        <span>Day 7</span>
    </div>

Now, we see that Week A's, day's 2,4,6 are red - which is intended. But on Week B, the odd numbered days are red. This is not what's required.

Without editing the HTML (which is generated by a third party), can we get the CSS to always colour the even <span>s listed directly after the H3 element?

I have looked at code for :nth-of-type() and can't see a way to do this, and have tried using the CSS + operator which also doesn't do this (eg h3 + span:nth-of-type(even){ ).

Intended result on this example would be that across any weeks, the even numbered days are marked as red.

Also tried:

   #container > h3 ~ span:nth-of-type(even){
        color: red;
        font-weight:bold;
    }

But this doesn't seem to work, perhaps nth-of-type can't target siblings like this?

How can this be achieved? We can not edit the HTML that is sent from a third party.

Answer 1

Since you always(?) have one h3 followed by seven span, :nth-child(odd) does the trick:

/** layout / setup only **/
   #container {
      background-color: aqua;
      margin:1rem;
      padding:1rem;
   }
   span {
      display:block;
    }

   #container span:nth-child(odd){
        color: red;
        font-weight:bold;
    }

<h2>Big Header</h2>
    <div id='container'>
        <h3>Week Title A</h3>
        <span>Day 1</span>
        <span>Day 2</span>
        <span>Day 3</span>
        <span>Day 4</span>
        <span>Day 5</span>
        <span>Day 6</span>
        <span>Day 7</span>
        <h3>Week Title B</h3>
        <span>Day 1 B</span>
        <span>Day 2</span>
        <span>Day 3</span>
        <span>Day 4</span>
        <span>Day 5</span>
        <span>Day 6</span>
        <span>Day 7</span>
    </div>

UPDATE:
If the number of "days" will be small, as you said "5-12 rows", you might resort to an uglier, but still pure CSS solution using something like this:

/** layout / setup only **/
#container {
  background-color: aqua;
  margin: 1rem;
  padding: 1rem;
  font-size: 8px;
}

span {
  display: block;
}

#container h3+span+span,
#container h3+span+span+span+span,
#container h3+span+span+span+span+span+span,
#container h3+span+span+span+span+span+span+span+span,
#container h3+span+span+span+span+span+span+span+span+span+span,
#container h3+span+span+span+span+span+span+span+span+span+span+span+span,
#container h3+span+span+span+span+span+span+span+span+span+span+span+span+span+span {
  color: red;
  font-weight: bold;
}

<h2>Big Header</h2>
<div id='container'>
  <h3>Week Title 0</h3>
  <span>Day 1</span>
  <span>Day 2</span>
  <span>Day 3</span>
  <span>Day 4</span>
  <h3>Week Title A</h3>
  <span>Day 1</span>
  <span>Day 2</span>
  <span>Day 3</span>
  <span>Day 4</span>
  <span>Day 5</span>
  <span>Day 6</span>
  <h3>Week Title B</h3>
  <span>Day 1 B</span>
  <span>Day 2</span>
  <span>Day 3</span>
  <span>Day 4</span>
  <span>Day 5</span>
  <span>Day 6</span>
  <span>Day 7</span>
  <span>Day 8</span>
  <span>Day 9</span>
  <span>Day 10</span>
  <span>Day 11</span>
  <span>Day 12</span>
  <span>Day 13</span>
  <span>Day 14</span>
  <span>Day 15</span>
</div>