Change the background-color of alternate elements css
<p>I wanna change the color of alternate elements, but my code is not working. My code changes the color of the whole container element. </p>

<p>Can anyone please tell me where am I making mistake in the code?</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>.pvt-msg-panel {
  height: 92vh;
  float: left;
  margin-top: -20px;
}
#pvt-messages-box {
  height: 50vh;
  width: 650px;
  margin-top: 10px;
  margin-left: 10px;
  overflow-y: scroll;
}
.pvt-messages-box-item {
  padding: 10px;
  padding-left: 20px;
  position: relative;
  display: inline-block;
  width: 100%;
  color: black;
  padding-left: 20px;
  font-size: 12px;
  cursor: pointer;
}
.pvt-messages-box-item:nth-child(odd) {
  background-color: green;
}
.pvt-messages-box-item:nth-child(even) {
  background-color: white;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="pvt-msg-panel"&gt;
  &lt;section id="pvt-messages-box"&gt;
    &lt;span class="pvt-messages-box-item"&gt;&lt;span&gt;&lt;img src="images/avatar2.png"&gt;&lt;/span&gt;message 1&lt;/span&gt;
    &lt;br&gt;
    &lt;span class="pvt-messages-box-item"&gt;&lt;span&gt;&lt;img src="images/avatar2.png"&gt;&lt;/span&gt;message 2&lt;/span&gt;
    &lt;br&gt;
    &lt;span class="pvt-messages-box-item"&gt;&lt;span&gt;&lt;img src="images/avatar2.png"&gt;&lt;/span&gt;message 3&lt;/span&gt;
    &lt;br&gt;
  &lt;/section&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>