jquery fails to alter label:before

I have encountered a peculiar issue with jQuery and labels. It's quite strange because everything seems to work fine when I change the background color of a label or its font-weight, but using the :before selector doesn't seem to work.

Any thoughts on this?

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>
jquerycsslabel

Answer №1

jQuery is unable to select pseudo elements since they are not part of the DOM. To resolve this issue, you must utilize jQuery to modify the parent label element. This can be done based on a specific class, like so:

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

Subsequently, you can target this class in your CSS to adjust the pseudo element accordingly:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

sequentially linked dropdowns using jQuery, PHP, and MySQL for repeated

Here is a Sample MySql Table (including an id column): +----------------------------------+ | one | two | three | four | five | +----------------------------------+ | v1 | v2 | v3 | v4 | v9 | +----------------------------------+ | v1 | v2 | ...

phpjquerymysqlselect

Is there a way to monitor the home button press event within a PhoneGap application?

Hello! I'm curious if there is a way to track when the Home button is pressed on both Android and IOS using phonegap phonegap build. I have looked into events for the home button press, but have only found information on back button events so far. ...

javascriptjqueryhtmlcordovaappframework

What is the process for obtaining the indirect link of a Google search result?

I am looking to obtain the indirect link of a Google search result. After performing a search on Google, if I right-click on the result link, it changes to something like this: https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&am ...

javascriptc#jqueryurlgoogle-search

The jQuery Mobile framework fails to initialize when loading data from an AJAX request in JSON format

I'm currently attempting to incorporate the jQuery Mobile 'styles' (specifically for buttons) into my project. Below is the HTML code snippet I am using (with Ajax): <!-- Using local jQuery + Mobile files --> <link rel="stylesheet ...

jqueryajaxjsonmobile

To collapse a div in an HTML Angular environment, the button must be clicked twice

A series of divs in my code are currently grouped together with expand and collapse functionality. It works well, except for the fact that I have to click a button twice in order to open another div. Initially, the first click only collapses the first div. ...

javascripthtmlcssangulartypescript

Maintaining the dropdown in the open position after choosing a dropdown item

The dropdown menu in use is from a bootstrap framework. See the code snippet below: <li id="changethis" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown>LINK</a> <ul class="dropdown-menu"> <li id ...

javascriptjqueryhtmltwitter-bootstrap

Tips on how to submit the ID of a span element with ajax

Can anyone help me retrieve the post ID of a span using Ajax? I have tried using alert($(this).attr("id")) and it works, but when I try to use Ajax it doesn't work. Any ideas why? $(".nav-item").click(function() { $.ajax({ ...

jqueryajaxthisattr

The table is empty as no data is present when utilizing DataTables along with an AJAX request for a

I've been attempting to populate a table with data from a JSON file using DataTables. However, every time the page loads, all I see in the table is "No data available in table". Here's the code snippet I'm currently working with: <table ...

jquerynode.jsajaxexpress

Tips for reconnecting tinymce to a textarea following an ajax refresh

Whenever I submit a form with a tinymce textarea, the containing div gets reloaded using the following code: $('body').on('submit', '.comment_form', function (e) { e.preventDefault(); tinyMCE.triggerSave(); ...

jqueryajaxtinymcereload

Locate all elements by a segment of the identification attribute

Is it feasible to achieve the following: I possess a collection of divs, all having IDs that conclude with '_font', such as 'body_font', 'heading_font', 'tagline_font', and so on. Is there a method to retrieve thes ...

javascriptjquery

<div> issues with background display

I have created two different sections with distinct backgrounds. However, I am facing an issue where these two divs are not appearing on the webpage. My intention is to position the Navbar at the top and have another section below it that is not linked to ...

htmlcss

What is the best way to prevent content from spilling over into the div on the right

I'm having trouble with a two column div where the text in the left column is overflowing into the right column. How can I prevent this? http://example.com <div id="wrapper-industry"> <div id="wrapper-form"> <div id="form_row"> ...

csshtml

Numerals for Central Leaflet Marker

Is there a way to effectively center numbers inside markers? Here is the current situation: View Marker with Number How to Create a Marker return L.divIcon({ className: "green-icon", iconSize: [25, 41], iconAnchor: [10, 44], popupAn ...

javascriptcssreactjsleafletreact-leaflet

Attempting to remove the initially added div by utilizing a button results in the deletion of the subsequent appended div in jQuery

Suppose there are 2 appended divs inside a main div. When attempting to remove the first appended div using the revoke button, it initially removes the second appended div. However, if the revoke button is clicked again on the first div, it then removes th ...

jqueryajax

Step-by-step guide on replicating a website along with its CSS styles and scripts

I've been exploring the idea of cloning a webpage, such as Instagram's login page, along with its CSS elements and JavaScript, to use locally. Basically, I want to duplicate the login page and host it on my test server in a way that allows it to ...

javascripthtmlcssweb-scrapingbeautifulsoup

Could someone please assist me with an issue I am experiencing with an AJAX GET request?

My code is not fetching any data for me. Below is the code snippet: <script type="text/javascript"> function matriculaFn(mat) { $.ajax({ method: 'GET', url:'My url API, async: true, crossDomain: false, contentType: 'application/j ...

javascriptjqueryajaxget

Dynamic form validation using jQuery

I am facing a challenge with validating a dynamic form on the user side. My goal is to ensure that if a user fills out one column in a row, they are required to fill out the remaining columns as well. For example, filling out the CC # should prompt the use ...

javascriptjqueryhtmlformsvalidation

Clicking the set button in Jquery mobile datebox resets the time

I am experimenting with the jquery mobile datebox (courtesy of Jtsage) to select time and date. Unfortunately, every time I reset the time by clicking the set button, I am unable to retrieve the correct time. Below are my code snippets: $.extend($.jtsag ...

javascriptjqueryhtmljquery-mobiledatebox

Why do I encounter the issue of receiving a "function not defined" error when using setInterval in conjunction with jQuery?

I need to make updates to a user's field using jQuery. Here is my code snippet... jQuery(document).ready(function(){ setInterval("keepUserActive()", 6000); function keepUserActive() { jQuery.post('/users/update_useractive', ...

javascriptjquery

Tips on obtaining the response (in JSON format) in your console when accessing a URL

Can someone help me integrate this code into my project and guide me on how to proceed with it? function validate() { var un = document.loginscreen.uname.value; var pw = document.loginscreen.psw.value; var username = "John_Smith"; var passw ...

javascriptjqueryajax