I am trying to add styles to To-do items on my web page using their id field.
<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>
#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;
}
When a checkbox of a to do item is checked, the corresponding to do item's style is changed. However, I am able to only change the style of a limited number of to do items because in css, we have to hard code the style for each To do item's id. I want the website to enter as many to do items as possible and their checkboxes to run perfectly. How to achieve this?
you dont have to hard code CSS for every label. You can just add the properties to all children elements of your <ul class="tasks"> parent element.For e.g .tasks input {} will select all the input tags inside your tasks class.
You could use a selector which will select all elements with an attribute starting with a specified string
[attr^=value]
see MDN
In your case:
*[id^="label-"]:checked ~ label[for^="label-"]{
background: #6d335c;
border-bottom: 1px solid #34495E;
color: #d37b79;
}
However, unless there is a reason why you have to distinguish between those elements by id, I'd suggest you use a class instead. Then you can be absolutely sure you are getting the right set of elements.