remove multiple css classes with together using jquery

Question

I am still a student in university and new to jQuery. I want to know how to remove CSS classes like these using jQuery:

.starrate span:hover:before,.starrate span:hover ~ span:before {
    content: "\2605";
    position: absolute;
    color: orange;
    cursor: pointer;
}

I tried this:

$('#s10').on( "click", function() {
    var val = $(this).data("values5"); 

    $("#s10").html("<span>&bigstar;</span>");
    $("#s10").addClass("newstarrate");
    $("#s10").removeClass("starrate span:hover:before,.starrate span:hover ~ span:before");
});

But it doesn't work. How can I remove these classes?

Answer 1

This will remove the class you just added :

 $("#s10").removeClass("newstarrrate")

You can't change the CSS definition if it was your purpose.

Answer 2

From looking at your example, you are trying to over complicate things.

The only actual class involved is any text directly after a '.' up to the first space. The whole thing is a CSS selector, not a class. In your example, the only part which is a class in the CSS selectors above is '.starrate'.

Due to CSS specificity (the tree-like nature of DOM elements and the way CSS is applied), if you take out the "parent" class, the children will not be affected with the styles listed, so the following should remove the CSS styles:

$("#s10").removeClass("starrate");