Adding background color to alternate set of 'n' number of elements using CSS-CodePudding

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 >
  <div >
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
  </div>
  <div >
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
  </div>
  <div >
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
  </div>
  <div >
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
  </div>
</div>

CodePudding user response：

`.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 >
  <div >
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
    <div >content</div>
  </div>
</div>