1

I would like to make a similar style of reddit comment.

Like that:

<div>
  <div class="comment" style="background: white;">
    <div class="comment" style="background: grey;"></div>
    <div class="comment" style="background: grey;">
      <div class="comment" style="background: white;">
        <div class="comment" style="background: grey;"></div>
      </div>
    </div>
  <div class="comment" style="background: white;"></div>
</div>

I'm looking for doing this with my situation

Actually my html code is generate by Rails and look like that

<div class="comment_main-list>
  <div class="comment_list">
    <div class="comment">blabla</div>
    <div class="comment_main-list>
       <div class="comment_list>
         <div class="comment">answer to blabla</div>
       </div>
    </div>
  </div>
  <div class="comment_list">...</div>
</div>

I tried to take something like that

.comment_list{
  background: #ececec;
  .comment_list{
    background: #dfdfdf;
    .comment_list{
      background:  #ececec;
    }
  }

Obviously it work but I can't do that for an undefined times, I tried to take a look to the loop in sass but I don't know how to know the number of comment in advance.

Also nth:child or nth:type doesn't do what I want.

Do you have any idea on how I can do that ?

Thank you

Gaeguri
  • 455
  • 4
  • 19
  • Is there a specific order of colours you are trying to achieve? – JHEUNG Jul 23 '19 at 16:43
  • Not really I just want to use two colors and the child must be a different color of the parent. For example if the parent is `white` then all of his children should be `gray` and the children of the children should be `white`. – Gaeguri Jul 23 '19 at 16:53
  • I think this is a possible duplicate of https://stackoverflow.com/questions/8499496/css-refer-to-every-odd-nested-child – StardustGogeta Jul 23 '19 at 17:41
  • 1
    Rather than trying to create a CSS logic solution, can you configure your Rails code to add an additional class for background color as it's looping through and building the HTML? – Sean Jul 23 '19 at 18:45

1 Answers1

-1
<div>
  <div class="comment" style="background: white;">
    <div class="comment" style="background: grey;"></div>
    <div class="comment" style="background: grey;">
      <div class="comment" style="background: white;">
        <div class="comment" style="background: grey;"></div>
      </div>
    </div>
  <div class="comment" style="background: white;"></div>
</div>

On css

 div:nth-child(1) {
      background: red;
 }
 div:nth-child(2) {
      background: blue;
 }
violetjs
  • 1