How to have a sequence of different alternated colors

Question

I need that consecutive classes have alternating colors also when interspersed by other (consecutive) classes.

So the green bb second in the second picture should have been blue as seen below

need

now

.first{
  color: red;
}

.first ~ .second:nth-child(even) {
  color: blue;

}

.first ~ .second:nth-child(odd){
color:green;
}

  <div class="first">aa first</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="first">aa first</div>
  <div class="first">aa first</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>

Original text

It is necessary that consecutive classes are the first first and the next second was an alternating color, and then when back found first again alternated as the picture classes are in order necessary

The aa first should not be alternating? Only the second? Can you perhaps give the expected color name in the div? — mplungjan, Sep 01 '19 at 06:59

Omer · Accepted Answer · 2019-09-01T08:03:18.463

Use nth-child with n

.first{
  color: red;
}

.first ~ .second div:nth-child(even){
  color:green;
}

.first ~ .second div:nth-child(odd){
    color: blue;
}

<div class="first">aa first</div>
<div class="second">
  <div>bb second</div>
  <div>bb second</div>
  <div>bb second</div>
</div>
<div class="first">aa first</div>
<div class="first">aa first</div>
<div class="second">
  <div>bb second</div>
  <div>bb second</div>
  <div>bb second</div>
  <div>bb second</div>
  <div>bb second</div>
</div>
<div class="first">aa first</div>
<div class="first">aa first</div>
<div class="second">
  <div>bb second</div>
  <div>bb second</div>
  <div>bb second</div>
</div>
<div class="first">aa first</div>

Adding for comment

.first{
  color: red;
}
.first + .second{
    color:blue;
}
.first + .second + .second{
    color:green;
}
.first + .second + .second + .second{
    color:blue;
}
.first + .second + .second + .second + .second{
    color:green;
} 
.first + .second + .second + .second + .second + .second{
    color:blue;
} 
.first + .second + .second + .second + .second + .second + .second{
    color:green;
} 
.first + .second + .second + .second + .second + .second + .second + .second{
    color:blue;
} 
.first + .second + .second + .second + .second + .second + .second + .second + .second{
    color:green;
} 
.first + .second + .second + .second + .second + .second + .second + .second + .second + .second{
    color:blue;
}

<div class="first">aa first</div>
<div class="first">aa first</div>
<div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
<div class="first">aa first</div>
<div class="first">aa first</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
<div class="first">aa first</div>
<div class="first">aa first</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
  <div class="second">bb second</div>
<div class="first">aa first</div>

Ok, you can use ++++++ a lot of + to cover all cases if you know some limit... I will add it to the code. tell me if its ok for you — Omer, Sep 01 '19 at 08:02

AdityaSrivast · Answer 2 · 2019-09-01T07:10:10.953

I understand what you're trying to achieve here. But it is not possible with CSS.

.second:nth-child(even) selects all the even elements inside the parent and applies the style if it has class second. So you cannot select the even or odd elements of .second.

However, you can still try JS or jquery: Run loop over all the elements with the class second and apply it to the even and odd elements.
You could also use general sibling selector(~) multiple times for counting the nth element, although I don't advice it if your data is dynamic.
Check Ilya Streltsyn's answer here: :nth-child(even/odd) selector with class
Or: https://jsfiddle.net/ssuryar/6ka13xve/
Enclosing .second inside a parent div each time you use it

Refer:

https://css-tricks.com/almanac/selectors/n/nth-child/

CSS3 selector to find the 2nd div of the same class

nth-child doesn't respond to class

Hope this helps. Cheers!!

How to have a sequence of different alternated colors

2 Answers2

Use nth-child with n

Adding for comment