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

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? 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>

If you cant use sass, an easy only css solution would be something like doing "a lot" of :nth-child(x) statements where x is a multiple of 4. So nth-child(4)/8/12/16/... so you have a few colors repeating — Endunry
– Endunry, Commented Jan 28, 2022 at 16:42
yes I can use sass and there will be only 2 colors repeating — barry allen
– barry allen, Commented Jan 28, 2022 at 16:47
I mean that just feels like a table tbh, can you put the same structure into a table and do it by <tr>? — Endunry
– Endunry, Commented Jan 28, 2022 at 16:50
The content is dynamic and I'm not supposed to do it with <tr> table structure — barry allen
– barry allen, Commented Jan 28, 2022 at 16:53

Paulie_D · Accepted Answer · 2022-01-28 16:57:54Z

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>

answered Jan 28, 2022 at 16:57

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Endunry Over a year ago

I think thats the absolut smartest way to do it, when the number 4 isnt dynamic.

barry allen Over a year ago

The number of cells in each row is not predictable so this wouldn't work

Paulie_D Over a year ago

Then this is not possible with CSS

Kameron · Accepted Answer · 2022-01-28 16:54:09Z

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>

Yeah this is a nice approach but the content is dynamic and I can't change the html structure

Nagini · Accepted Answer · 2022-01-28 16:52:15Z

0

`.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>

answered Jan 28, 2022 at 16:52

Nagini

12 bronze badges

1 Comment

Shahriar Over a year ago

Please add some explanation about your solution.

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related