how to change css value

Question

I have a class in css file like this

#current a::after {
    background: #fff;
    z-index: 3;
}

I need to change backround color by clicking on checkbox

$(document).ready(function(){
    $(".element" ).click(function(){    

        $("#current a::after").css("background-color:", "red");     

    });

What is the right syntax of my code?

it has to look either: `$("#current a::after").css({"background-color" : "red"});` or `$("#current a::after").css("background-color", "red");` — Banzay, Dec 11 '14 at 14:07

score 3 · Answer 1 · edited May 23 '17 at 10:33

According to this post (https://stackoverflow.com/a/5041526/3349272) manipulating CSS pseudo-elements with jquery is not possible.

But here's a solution to your issue...

Jquery

$(document).ready(function(){
    $(".element" ).click(function(){   
        $("#current a").addClass("after");     
    });
});

(You could also use "toggleClass" depending on what you're trying to achive.)

CSS

#current a.after:after{
    background-color: red;
}

This is just a different solution to the same problem. By adding a class and a new CSS style you can achieve the same output.

score 0 · Answer 2 · answered Dec 11 '14 at 14:07

You have an unnecessary : in your property.

The css() function in jQuery will take either 2 parameters (property, value) for a single change:

$('div').css('background-color','#fff');

or an object for multiple changes:

$('div').css({'background-color':'#fff', 'color':'#000'});

2 Answers2