CODEWITHSUNDEEP
css
Božo Stojković
Božo Stojković

Reputation: 2943

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 in 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:

<body style="width:400px;">
    <div>
        <div id="gmail-message-wrapper">
            <div id="gmail-message-container">
                <span class="trim-text">[email protected] (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">[email protected] (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">[email protected] (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);
}

Upvotes: 0

Views: 1272

Answers (4)

John Shang
John Shang

Reputation: 417

.gmail-message-container:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.5);
}
.gmail-message-container:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.1);
}
<body style="width:400px;">
  <div>
    <div id="gmail-message-wrapper">
      <div class="gmail-message-container">
        <span class="trim-text">[email protected] (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 class="gmail-message-container">
        <span class="trim-text">[email protected] (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 class="gmail-message-container">
        <span class="trim-text">[email protected] (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>

Click the definition of nth-child in w3school

Upvotes: 2

Johannes
Johannes

Reputation: 67778

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/

Upvotes: 4

rivimey
rivimey

Reputation: 931

It works because nth-child selects siblings of the element it's applied to; in this case, its applied to the wrapper but should be applied to the container so the children being selected are the message containers.

Is that what you meant?

Upvotes: 1

Arshid KV
Arshid KV

Reputation: 10037

Please try as follows

CSS:-

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

Upvotes: 0

Related Questions