Alternate style with nth-child

Question

I'm struggling with my styles.

I'd like to alternate the blue and green bubbles (blue > green > blue > green ...). Only the .bubble element should have a background-color that alternates. The .input should remain as is.

Here is my simplified code.

.container > div {
  display: inline-block;
  margin: 5px;
}

.container .bubble:nth-child(even) {
    background-color: #4a94ed;
    border-color: #4a64ed;
}


.container .bubble:nth-child(odd) {
    background-color: #4df200;
    border-color: #00f23d;
}

<div class="container">
    <div class="input">input</div>
    <div class="bubble">bubble 1</div>
    <div class="input">input</div>
    <div class="bubble">bubble 2</div>
    <div class="input">input</div>
    <div class="bubble">bubble 3</div>
    <div class="input">input</div>
    <div class="bubble">bubble 4</div>
    <div class="input">input</div>
    <div class="bubble">bubble 5</div>
</div>

My issue seems to come from the .input elements that count as an nth-child since only the even part triggers.

Unfortunately, I can't change the HTML structure nor classes.

Do you have any idea?

I am sure this same question has been asked multiple times. You shouldn't use `odd` and `even` for your case. Instead use `nth-child(4n)` for even and `nth-child(4n+2)` for odd. Each `.bubble` item is the even child of its parent (that is, the 2nd child, the 4th child and so on..). — Harry, May 31 '16 at 11:00
Possible duplicate of [nth-child doesn't respond to class selector](http://stackoverflow.com/questions/3203313/nth-child-doesnt-respond-to-class-selector) — caramba, May 31 '16 at 11:02
@pistou: I think I've myself posted atleast 2-3 answers on very similar lines and anymore would look like rep-hunting, so I will leave it there (too lazy to search for the primary question :D). — Harry, May 31 '16 at 11:04

Jason Graham · Accepted Answer · 2016-05-31T11:11:52.343

3

Try changing your odd and even styles to:

.container .bubble:nth-child(2n) {
    background-color: #4a94ed;
    border-color: #4a64ed;
}

.container .bubble:nth-child(4n) {
    background-color: #4df200;
    border-color: #00f23d;
}

Working example: http://codepen.io/JasonGraham/pen/VjYYXd

edited May 31 '16 at 11:11

answered May 31 '16 at 11:00

Jason Graham

904
6
12

Sorry I was not clear enough. Only the `.bubble` elements should have a `background-color`, that alternates. – pistou May 31 '16 at 11:05
Oh no, that's my misunderstanding! I've tweaked the code pen to use the nth-child(2/4n) selector like @Harry suggested. Hopefully that should be you up and running! – Jason Graham May 31 '16 at 11:10

score 3 · Answer 2 · answered May 31 '16 at 11:22

3

    .bubble:nth-child(4n+2) {
    background-color: #4a94ed;
    border-color: #4a64ed;
}

 .bubble:nth-child(4n+4) {
    background-color: #4df200;
    border-color: #00f23d;
}

try this at my fiddle: https://jsfiddle.net/0ua51sum/7/

answered May 31 '16 at 11:22

Bram B

368
2
14

score 2 · Answer 3 · answered May 31 '16 at 11:38

2

This Will Work....

.bubble:nth-child(2n) {background-color: #4a94ed;
border-color: #4a64ed;}
.bubble:nth-child(4n){background-color: #4a94ed;
border-color: #4a64ed;}

answered May 31 '16 at 11:38

Sujan Shrestha

1,020
1
18
32

score 1 · Answer 4 · answered May 31 '16 at 11:19

You can write your nth child selectors as following :nth-child(4n+2) or :nth-child(4n).

.container > div {
  display: inline-block;
  margin: 5px;
}

.container .bubble:nth-child(2n) {
    background-color: #4a94ed;
    border-color: #4a64ed;
}


.container .bubble:nth-child(4n) {
    background-color: #4df200;
    border-color: #00f23d;
}

<div class="container">
    <div class="input">input</div>
    <div class="bubble">bubble 1</div>
    <div class="input">input</div>
    <div class="bubble">bubble 2</div>
    <div class="input">input</div>
    <div class="bubble">bubble 3</div>
    <div class="input">input</div>
    <div class="bubble">bubble 4</div>
    <div class="input">input</div>
    <div class="bubble">bubble 5</div>
</div>

Alternate style with nth-child

4 Answers4