Modify the border color on the right side of the div using jQuery

How can I change the border right color of a class using :after pseudo element?

Here is the CSS for the normal border:

.profile-options a div:after {
border-color: transparent #999999 transparent transparent;
border-style: solid;
border-width: 18px;
content: "";
display: block;
left: -15px;
margin-top: -33px;
position: absolute;
z-index: 999;}

I want to change the #999999 color to #333333 when selected with jQuery.

I tried these methods but they didn't work:

$(".profile-options a div:after").css({"borderRightColor":"#999"});
$(".yourOptions1:after").css({"borderRightColor":"#333"});
jquerycssajax

Answer №1

To customize your website's style, you can utilize the styleSheets property.

Assuming you have a single stylesheet with the initial rule being the first one, you can easily modify it by executing:

document.styleSheets[0].cssRules[0].style.backgroundColor="#F0F0F0";

A Comprehensive Guide on Using StyleSheets: Adding, Removing, and Modifying Styles for IE and other Browsers

The use of styleSheets not only allows you to update standard styles but also handles pseudo-elements efficiently.

Answer №2

Modifying the (:after) style with JQuery is not possible. However, you can resolve this issue by adding a DIV in the HTML structure after the desired DIV element, and then manipulating it using JQuery.

<div class="content_1"></div> <div class="after_content"></div>
<div class="content_2"></div>  <div class="after_content"></div>

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

Dealing with the dilemma of Two AjaxButtons enclosed in individual forms in Wicket

I am trying to incorporate two separate file upload sections on a single page - one for images and another for other types of files. Each section includes a form with an AjaxButton. Initially, I successfully set up the first section, which functioned as in ...

javahtmlajaxwicket

How can I create a dashed border around a <div> element using HTML and CSS?

On Stack Overflow, I noticed that there are many DIV elements surrounded by dotted lines. How can this be achieved using CSS and HTML? Thank you, Bin ...

htmlcss

Having trouble with my navbar toggler arrow malfunctioning

I have developed a toggler button with an arrow icon that transforms into bars when clicked. However, I am experiencing some issues with the code: 1.) After clicking the toggler for the first time, the arrow icons change to bars successfully. But when I c ...

javascriptjquerycssbootstrap-4

Does 1 CSS point amount to the same as 75% of a CSS Pixel?

Can anyone help clarify the relationship between CSS pixels and CSS points in modern web design? I've come across information stating that one CSS point is equivalent to 3/4 of a pixel. Is this accurate? Also, is it true that we can disregard the old ...

htmlcsspixelunits-of-measurement

Error encountered: The jQuery function was not invoked while attempting to retrieve geoJSON data through an Ajax request from a Node.js server

I've been struggling to pass geoJSON data from a Node.js app on one server to a web app running on another server. Despite searching through numerous resources, I haven't been able to resolve the issue. Using the RestEasy extension on Chrome, my ...

jqueryjsonajaxnode.js

Does setInterval consume a significant amount of CPU resources?

Recently, I came across an article stating that setInterval is considered to be CPU intensive. To verify this claim, I developed a script utilizing setInterval and closely monitored the CPU usage. Surprisingly, I did not observe any significant changes in ...

javascriptajaxcpusetinterval

Inform the Rails controller about the view that triggered the action

Two different views are invoking the same controller create action, allowing users to "Track" a product. When the user clicks the "Track" button, an AJAX request is submitted using the remote: true attribute. The JavaScript response should re-render the sp ...

javascriptjqueryruby-on-railsajaxpartial

Tips for Referencing Images in a JS File with the Asset Pipeline?

In my Rails 3.1 app, I am utilizing jQuery Lightbox with the asset pipeline. I am specifically looking for the most effective method to manage references to images within the .js file: // Initialization and settings for jQuery Lightbox // For additional ...

jqueryruby-on-rails-3lightbox

Is it possible to target inputs by class using jQuery.serializeArray() method?

I am experimenting with posting various columns of a table using jQuery's ajax feature... So far, I have had success with this code: var fields = $(":input").serializeArray(); However, when attempting to reduce the set, it does not work as expected: ...

serializationjqueryjquery-selectors

What is the best method for saving this.score to a text file in order to create a high score leaderboard? (AJaX)

Is there a way to save this.score to a text file using ajax so that highscores are displayed when the game is over? Also, I would like an alert message saying "Your score has been saved successfully". I am not very familiar with ajax, so any detailed expl ...

javascriptphpjqueryajax

By increasing the background-color to 100%, the list item obstructs the background image of its parent div

In cases where an element is set to display:block, the background-color of that element typically extends to 100% of the width of its parent element. However, I am seeking a solution where the background-color only reaches the edge of the text, allowing th ...

htmlcss

Issues with Ajax POST not functioning correctly in Internet Explorer

A current project of mine involves developing a PHP script that automatically sends birthday emails to individuals. To complement this, I am also working on creating a user-friendly web interface where I can toggle the program on or off, monitor who is cel ...

javascriptajaxinternet-explorer-8

Choosing an automatically generated choice from a C# web browser control

Using a c# web browser control, I am navigating a commercial website to access a list of potential jobs. However, I encountered an issue while trying to bid on these jobs through some links. The problem arises when dealing with forms that contain two sele ...

javascriptc#ajaxwebbrowser-control

setting a callback function as a variable

I have encountered an issue where I am passing a callback function but unable to call it when the onreadystatechange changes its value, specifically request.onreadystatechange = func. Even though I receive a response from the server when making the ajax ...

javascriptajax

Utilizing local storage for the functionality of my Save Button

My innovative program features a drag-and-drop functionality for assigning players to different teams. If 'Player A' is dragged into the 'Team D' column, I am looking for ways to manipulate localStorage or any other function to save the ...

javascriptjqueryhtmlcss

Unauthorized Twitter API Request: Error 401

I am attempting to make a REST call through POST from Firefox for the first time. I have generated the necessary token and Auth strings, which include: oauth_consumer_key oauth_nonce oauth_signature oauth_signature_method oauth_timestamp oauth_token ...

restjquerytwitter-oauth

Looking for assistance with CSS positioning techniques

Creating a dropdown list with a caret icon for each item is my goal, but I'm facing some challenges. Here's the code snippet of the div structure: <div class="class-to-div1" id="{{ div.id }}" data-cardsnum="{{ div.num }}"> <div clas ...

htmlcss

Scrapy has a limitation where it can only scrape up to 10 records at a time

Hello everyone, I am new to using Scrapy and Python for web scraping purposes. Currently, I am facing a challenge with scraping data from a website that uses AJAX for pagination. Due to the AJAX implementation, I am only able to retrieve up to 10 records ...

ajaxpython-2.7scrapy

Keeping everything aligned, my aim is to position the search bar and the logo side by side on the left-hand side and stretch the search bar all the way to the end

Looking to adjust the placement of the logo and search bar on the left side while extending the search bar further to the right. Struggling to get the desired layout? No worries, we've got you covered! Also need a join and log in button aligned to the ...

htmlcss

How can I sanitize input data in Django 1.7 before passing it in an AJAX request?

My Django app is functioning well with uncleaned data being passed into an AJAX call. However, I want to ensure that only [a-zA-Z] characters are passed, with no special characters or integers. Should I use a custom validator on the form/model field for th ...

javascriptjqueryajaxdjangodjango-forms