title: how to change font color of last element with specific class
body: <p>here is my html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.user-container div.user-left:last-child{
    color:red;
  }
  .user-container div.user-right:last-child{
    color:red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="user-container"&gt;
      &lt;div class="user user-left"&gt;Some text.&lt;/div&gt;
      &lt;div class="user user-left"&gt;Some text.&lt;/div&gt;
      &lt;div class="user user-left"&gt;Some text.&lt;/div&gt;
      &lt;div class="user user-left"&gt;Some text.&lt;/div&gt;
      &lt;div class="user user-left"&gt;Some text. this is user left last&lt;/div&gt;
      &lt;div class="user user-right"&gt;Some text.&lt;/div&gt;
      &lt;div class="user user-right"&gt;Some text.&lt;/div&gt;
      &lt;div class="user user-right"&gt;Some text.&lt;/div&gt;
      &lt;div class="user user-right"&gt;Some text. this is user right last&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>is there any way to change font color of last child of class 'user-left' and class 'user-right' using CSS ? in here user-right:last-child working but user-left:last-child not working.any idea?</p>