Using jQuery selector for css, escaping special characters

Question

I'm trying to change the background color of a radio button with jQuery. I posted the css below, but in jQuery I need to escape the special characters (see below) and its still not working.

#opt5 > [type="radio"]:not(:checked) + label:before,
#opt5 > [type="radio"]:checked + label:before {
    background: #F7DC6F;
}

$("\\#opt6 \\> \\[type\\=\\'radio\\'\\]\\:not\\(\\:checked\\) \\+ label\\:before").css({ "background": "red" });
$("\\#opt6 \\> \\[type\\=\\'radio\\'\\]\\:checked \\+ label\\:before").css({ "background": "red" });

Answer 1

This has nothing to do with the selector syntax. jQuery's selector engine is designed to support CSS selectors out of the box (to some extent, anyway). By escaping it you're stripping the selector of all its meaning turning it into something completely different from what you expect.

This has everything to do with the fact that pseudo-elements cannot be selected by jQuery . You have a number of options, which are covered in the link. I highly recommend the class name approach.