classList.toggle (vanilla Javascript) not adding all CSS styling

1

Hi all,

I’m very slowly trying to build a to-do list web app, and one of the functions I want to add is for a user to be able to click on a completed item and have that grayed and crossed out. I added the following class to my CSS:

    .completed {
        color: gray;
        text-decoration: line-through;
    }

And this function to my JS:

userList.addEventListener('click', function(ev) {
    if (ev.target.tagName === 'LI') {
        ev.target.classList.toggle('completed');
    }
});

However, when I click on the li, it changes color to gray but does not appear crossed out. Any insights on why this is happening? (full code at https://codepen.io/srhbishop/pen/vYOPXBm)

2

You have a selector with higher specificity:

.to-do-list li {
  font-size: 30px;
  text-decoration: none;
}

That is overwriting the text-decoration set in the completed class

.completed {
  color: gray;
  text-decoration: line-through;
}

You can increase the specificity of the selector:

.to-do-list .completed {
  color: gray;
  text-decoration: line-through;
}
3

Beautiful. Thank you so much!