Intermediate
A to-do list with state and position
Style the to-do list with pseudo-classes only (no new classes, no JavaScript):
Every even row gets the background #f3f4f6. The first row's label is bold. When a checkbox is ticked, the label right after it gets a line-through. The disabled button has opacity: 0.5.
What Check tests
- Rows 2 and 4 are striped
- Rows 1 and 3 are not striped
- Only the first label is bold
- Ticking a box crosses out its label
- Unticked labels are not crossed out
- The disabled button is half transparent
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.