CODEWITHSUNDEEP
htmlcss
Sajjan Sarkar
Sajjan Sarkar

Reputation: 4198

How to apply alternating background color to divs which are not siblings

I'd like aaaa and bbbb to have red background. How can I do this , the usual answers dont seem to work since the target divs are not siblings

Here is my CSS/HTML:

div.rules-container>div.ng-star-inserted>div.rules-form:nth-of-type(odd) {
  background: red;
}
<div class="rules-container">
  <div class="ng-star-inserted">
    <div class="rules-form">
      aaaaaaaaaaaa
    </div>
  </div>
  <div class="ng-star-inserted">
    <div class="rules-form">
      bbbbbbbbbb
    </div>
  </div>
  <div class="ng-star-inserted">
    <div class="rules-form">
      ccccccccccccc
    </div>
  </div>
</div>

Upvotes: 1

Views: 66

Answers (1)

Gosi
Gosi

Reputation: 2003

Use :nth-child(odd).

Answer 1:

If you want all the odd numbers, then do this:

.rules-container .ng-star-inserted:nth-child(odd) {
  background-color: red;
  }
<div class="rules-container">
  <div class="ng-star-inserted">
    <div class="rules-form">
      aaaaaaaaaaaa
    </div>
  </div>
  <div class="ng-star-inserted">
    <div class="rules-form">
      bbbbbbbbbb
    </div>
  </div>
  <div class="ng-star-inserted">
    <div class="rules-form">
      ccccccccccccc
    </div>
  </div>
</div>


<div class="ng-star-inserted">
    <div class="rules-form">
      dddddddddddddd
    </div>
  </div>
  
  
  <div class="ng-star-inserted">
    <div class="rules-form">
      eeeeeeeeeeeeee
    </div>
  </div>

Answer 2:

If you only want 1 & 3, not 5 , then change the css to:

.rules-container .ng-star-inserted:nth-child(1), .rules-container .ng-star-inserted:nth-child(3) {
  background-color: red;
}
<div class="rules-container">
  <div class="ng-star-inserted">
    <div class="rules-form">
      aaaaaaaaaaaa
    </div>
  </div>
  <div class="ng-star-inserted">
    <div class="rules-form">
      bbbbbbbbbb
    </div>
  </div>
  <div class="ng-star-inserted">
    <div class="rules-form">
      ccccccccccccc
    </div>
  </div>
</div>


<div class="ng-star-inserted">
    <div class="rules-form">
      dddddddddddddd
    </div>
  </div>
  
  
  <div class="ng-star-inserted">
    <div class="rules-form">
      eeeeeeeeeeeeee
    </div>
  </div>

Upvotes: 2

Related Questions