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