Estoy tratando de agregar color de fondo a un conjunto alterno de 'n' número de elementos. Digamos, por ejemplo, que el primer número 'n' de elementos será rojo y el siguiente número 'n' de elementos será negro y así sucesivamente... repitiendo el ciclo de rojo y negro.
Ignore el número 4 en las columnas de la plantilla de cuadrícula: repetir (4, automático) Se supone que es dinámico
No puedo cambiar la estructura HTML ni puedo hacerlo usando <table>
¿Se puede lograr esto solo usando css ? Si no, una respuesta de JS también sería apreciada
.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>Sí, usando Xn+y pero en múltiples selectores, esto no se puede hacer con un solo 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>Intentaría dividir cada fila en una table-row luego puede usar los siguientes estilos para establecer su regla background-color alternativo.
div.table-row:nth-child(even) {background: #ffd110} div.table-row:nth-child(odd) {background: #e1e1e1}Agregué otra fila para demostrar.
.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>