使用 CSS 将背景颜色添加到交替的“n”个元素集

Question

I'm trying to add background color to alternating set of 'n' number of elements. Say for example, the first 'n' number of elements will be red and the next 'n' number of elements will be black and so on.. repeating the loop of red and black.

Please ignore the number 4 in the grid-template-columns: repeat(4, auto) It is supposed to be dynamic

I can't change the HTML structure nor can I do it using <table>

Can this be achieved only using css?

 .table { margin-bottom: 20rem; border: grey 0.5px solid; display: grid; width: 100%; border-collapse: collapse; }.table-cell { display: flex; align-items: center; padding: 1em; border: grey 1px solid; }.table-cell:nth-child(4n) { background-color: #e0e0e0; }.table-row { grid-template-columns: repeat(4, auto); display: grid; }

 <div class="table"> <div class="table-row"> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> </div> </div>

Answer 1

I would try dividing each row into a table-row then you can use the following styles to set your alternating background-color rule.

div.table-row:nth-child(even) {background: #ffd110}
div.table-row:nth-child(odd) {background: #e1e1e1}

I added another row to demonstrate.

 .table { margin-bottom: 20rem; border: grey 0.5px solid; display: grid; width: 100%; border-collapse: collapse; }.table-cell { display: flex; align-items: center; padding: 1em; border: grey 1px solid; }.table-row { grid-template-columns: repeat(4, auto); display: grid; } div.table-row:nth-child(even) {background: #ffd110} div.table-row:nth-child(odd) {background: #e1e1e1}

 <div class="table"> <div class="table-row"> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> </div> <div class="table-row"> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> </div> <div class="table-row"> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> </div> <div class="table-row"> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> </div> </div>

Answer 2

Yes using Xn+y but in multiple selectors, this cannot be done with a single selector.

 .table { margin-bottom: 20rem; border: grey 0.5px solid; display: grid; width: 100%; border-collapse: collapse; }.table-cell { display: flex; align-items: center; padding: 1em; border: grey 1px solid; }.table-cell:nth-child(8n+4), .table-cell:nth-child(8n+3), .table-cell:nth-child(8n+2), .table-cell:nth-child(8n+1) { background-color: #e0e0e0; }.table-row { grid-template-columns: repeat(4, auto); display: grid; }

 <div class="table"> <div class="table-row"> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> <div class="table-cell">content</div> </div> </div>

Answer 3

`.table {
  margin-bottom: 20rem;
  border: grey 0.5px solid;
  display: grid;
  width: 100%;
  border-collapse: collapse;
}

.table-cell {
 display: flex;
 align-items: center;
 padding: 1em;
 border: grey 1px solid;
}

.table-cell:nth-child(2n) {
  background-color: black;
}

.table-cell {
  background-color: red;
}

.table-row {
  grid-template-columns: repeat(4, auto);
  display: grid;
}`


<div class="table">
  <div class="table-row">
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
    <div class="table-cell">content</div>
  </div>
</div>