Slayther Slayther - 5 months ago 10
CSS Question

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-container
s 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);
}

Answer

An ID should be used only once in a page. Try to give these DIVs a common class and seperate IDs to select them.

Addition:

Use the even and odd pseudo-selectors on the children (.gmail-message-container), not on the container (and make that a class, not an ID):

https://jsfiddle.net/yfjfwp5p/