Using odd and even CSS selectors

I'm trying to use CSS's odd and even selectors, but I can't wrap my head around what is happening iny my code... How is gmail-message-wrapper being selected?

The 3 gmail-message-containers should be selected and have alternating colors.. What am I missing?

https://jsfiddle.net/0d883fcz/

HTML:

style="width:400px;">
    <div>
        <div id="gmail-message-wrapper">
            <div id="gmail-message-container">
                <span class="trim-text">some.email@some.domain (Some Name)</span>:
                <br>
                <span class="trim-text"><b>Some title</b></span>
                <br>
                <span class="trim-text">Some summary text goes here</span>
            </div>
            <div id="gmail-message-container">
                <span class="trim-text">some.email@some.domain (Some Name)</span>:
                <br>
                <span class="trim-text"><b>Some title</b></span>
                <br>
                <span class="trim-text">Some summary text goes here</span>
            </div>
            <div id="gmail-message-container">
                <span class="trim-text">some.email@some.domain (Some Name)</span>:
                <br>
                <span class="trim-text"><b>Some title</b></span>
                <br>
                <span class="trim-text">Some summary text goes here</span>
            </div>
        </div>
    </div>
</body>

CSS:

#gmail-message-wrapper:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.5);
}
#gmail-message-wrapper:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.1);
}