Estoy tratando de agregar estilos a las tareas pendientes en mi página web usando su campo de identificación.
<body> <h1><%- dayType %></h1> <ul class="tasks"> <% for(i = 0 ; i < data.length ; i++){ %> <input id='label-<%-i+1%>' type='checkbox'/> <label for="label-<%-i+1%>"><li><%- data[i] %></li></label> <% } %> <li> <form action="/" method="post"> <input type="text" placeholder="Enter To Do Item" name="items"> <input type="submit" value="Submit"> </form> </li> </ul> En el código donde estoy usando bucles for, hay una casilla de verificación y una etiqueta a la que estoy agregando estilos. Mi css se ve así: #label-1:checked ~ label[for=label-1], #label-2:checked ~ label[for=label-2], #label-3:checked ~ label[for=label-3], #label-4:checked ~ label[for=label-4], #label-5:checked ~ label[for=label-5]{ background: #6d335c; border-bottom: 1px solid #34495E; color: #d37b79; }Cuando se marca una casilla de verificación de un elemento pendiente, se cambia el estilo del elemento pendiente correspondiente. Sin embargo, solo puedo cambiar el estilo de un número limitado de elementos pendientes porque en css, tenemos que codificar el estilo para la identificación de cada elemento pendiente. Quiero que el sitio web ingrese tantos elementos para hacer como sea posible y que sus casillas de verificación funcionen perfectamente. ¿Cómo lograr esto?
no tiene que codificar CSS para cada etiqueta. Simplemente puede agregar las propiedades a todos los elementos secundarios de su elemento principal <ul class="tasks"> . Por ejemplo .tasks input {} seleccionará todas las etiquetas de entrada dentro de su clase de tareas.
Podría usar un selector que seleccionará todos los elementos con un atributo que comience con una cadena específica
[attr^=value]ver MDN
En tu caso:
*[id^="label-"]:checked ~ label[for^="label-"]{ background: #6d335c; border-bottom: 1px solid #34495E; color: #d37b79; }Sin embargo, a menos que haya una razón por la que tenga que distinguir entre esos elementos por id, le sugiero que use una clase en su lugar. Entonces puede estar absolutamente seguro de que está obteniendo el conjunto correcto de elementos.