Geek Answers Handbook

Change background-background of alternative css elements

I want to change the color of alternative elements, but my code does not work. My code changes the color of the entire container element.

Can anyone tell me where I am making a mistake in the 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; } 
 <div class="pvt-msg-panel"> <section id="pvt-messages-box"> <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 1</span> <br> <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 2</span> <br> <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 3</span> <br> </section> </div>
+5
source share
3 answers

When using the first-child selector, the br tags will try to select the even selector. Try using the nth-of-type selector and you go!

Check it out and let me know your feedback. Thanks!

 .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-of-type(odd){ background-color: green; } .pvt-messages-box-item:nth-of-type(even){ background-color: white; } 
 <div class="pvt-msg-panel"> <section id="pvt-messages-box"> <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 1</span><br> <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 2</span><br> <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 3</span><br> </section> </div>
+7
source

here you have jsfiddle . use nth-of-type(odd) for span

 .pvt-messages-box-item:nth-of-type(odd){ background-color: green; } .pvt-messages-box-item:nth-of-type(even){ background-color: white; }

: nth-child matches if the element is the specified child of its parent. Element
inside the div causes the odd and even part of your selectors to crash, since it forces the odd children (1st and 3rd) of its parent.

+3
source

OK I found your problem.

First I copy my code into my brain and look like .ok?

the code looks like

If I change this code:

 background-color: red;

and the background turns completely red. So the problem is here, why?

First, the first childElement element is not span.pvt-message-box-item: nth-child (1), but a space, and the second is such an element. The third is the same, which is also a space between the first span and the second, now if you want to change the background color, alternatively you use this resolution. Change the css odd and even with the actual number, like replacing the odd and even with 1/3/5, and the result will look like your request:

satisfy the result

+2
source

More articles:


All Articles