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

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? If not a JS answer would also be appreciated

.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>
javascripthtmlcsscss-grid


Solution 1:[1]

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>

Solution 2:[2]

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>

Solution 3:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Paulie_D
Solution 2 Kameron
Solution 3 Nagini

Related Questions