title: Issue styling in CSS so each odd numbered div changes colour and position
body: <p>I am designing a web page where content appears within speech-bubble shaped divs. I would like to use CSS to modify the div so that every other speech bubble is slightly darker coloured and the pointy part of the speech bubble changes from right to left. </p>
  
  <p>I have been able to change the background colour and text-text-allignment of the main content of each odd-numbered div to a darker shade of grey, however the colour of the 'point' of the speech bubble and it's position from right to left will not change no matter what solution I have tried so far. </p>
  
  <p>The bit that's worked:</p>
  
  <pre><code>/* MAIN BODY OF SPEECH BUBBLE */
  
  .infoBox .aboutBox {
  
      border-top: 5px solid #670d94;
      background: #eee;
      padding: 1em;
      margin: 2em;
      margin-bottom: 4em; /* */
  
  }
  
  /* CHANGE LAYOUT/COLOUR OF EVERY OTHER SPEECH BUBBLE */
  
  .infoBox:nth-child(odd) .aboutBox {
  
      background: #c9c9c9;
      text-align: right;
  
  }
  
  </code></pre>
  
  <p>And the bit that hasn't:</p>
  
  <pre><code>
  /* CREATE SPEECH BUBBLE POINT */
  
  .bubble {
  
      position: relative;
      background: #eee;
  
  }
  
  .bubble::after  {
  
      content:"";
      display: block;
      position: absolute;
      width: 0;
      height: 0;
      border-right: 40px solid transparent; /* */
      border-left: 40px solid transparent; /* */
      border-top: 50px solid #eee; /* */
      right: 50px; /* */
  
  }
  
  /* CHANGE POSITION/COLOUR OF EVERY OTHER SPEECH BUBBLE POINT */
  
  .bubble:nth-child(odd) ::after  {
  
      content:"";
      display: block;
      position: absolute;
      width: 0;
      height: 0;
      border-right: 40px solid transparent; /* */
      border-left: 40px solid transparent; /* */
      border-top: 50px solid #c9c9c9; /* */
      left: 50px; /* */
  
  }
  
  </code></pre>
  
  <p>HTML is:</p>
  
  <pre><code>
  &lt;div class="infoBox"&gt;
  
              &lt;div class="aboutBox bubble"&gt;
  
                  &lt;div id="profilePic"&gt; &lt;img align="right" src="img\profileIcon.png"/&gt; &lt;/div&gt;
  
                  &lt;b&gt;Name Surname&lt;/b&gt;
                  &lt;br&gt;
                  Job role
                  &lt;br&gt;
                  &lt;br&gt;
                  Short bio: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  &lt;hr&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
  &lt;div class="infoBox"&gt;
  
              &lt;div class="aboutBox bubble"&gt;
  
                  &lt;b&gt;Name Surname&lt;/b&gt;
                  &lt;br&gt;
                  Job role
                  &lt;br&gt;
                  &lt;br&gt;
                  Short bio: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
                  &lt;hr&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
  </code></pre>
  
  <p>I have attached some images to clarify the solution I was aiming for and the results of my current code. Any help is greatly appreciated!</p>
  
  <p><a href="https://i.stack.imgur.com/EV3Fi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EV3Fi.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/0FDCj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0FDCj.png" alt="enter image description here"></a></p>