jquery isn't changing label:before

Question

I have really strange problem with jQuery and label. It's weird because everything works when i for example chaning background of label, font-weight, but about :before selector fails.

Any ideas?

jquery:

$(".something").click( function (event) {
    $(".somediv label:before").css("background", "#000")

});

html:

     <ul>
        <li class="somediv">
            <label for="winter">winter</label>
            <input type="checkbox" class="something" id="winter" />
        </li>
    </ul>

You can't manipulate CSS pseudo elements because they are not part of the DOM. — George, Nov 10 '14 at 09:08

score 4 · Answer 1 · answered Nov 10 '14 at 09:09

jQuery cannot be used to select psuedo elements as they do not exist within the DOM. To achieve what you need, you would have to use jQuery to change the parent label element. By class, for example:

$(".something").click( function (event) {
    $(".somediv label").addClass('active');
});

You can then pickup this class in CSS, and amend the psuedo element there:

.somediv label.active:before {
    background-color: #000;
}

jquery isn't changing label:before

1 Answers1