Update the CSS styles using jQuery

I am looking to update the content within a CSS tag using jQuery.

In this instance, I need to change "My content" to "New Content".

Here is the CSS code I have:

a.appari:focus:after{
  background: #333;
  background: rgba(0,0,0,.8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: "My content";
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 400px;
}

I attempted to achieve this with the following jQuery code:

function prova() {
{
 ?>
<script>
(function($){
  $(document).ready(function(){
    $('.appari').click(function(){         
      $("<style>.appari:focus:after { content: 'New Content'; }</style>").appendTo( "head" )
  });
});

})(jQuery);
</script>

<?php

  }
}

Thank you for your assistance.

Answer №1

You seem to be facing a challenge with CSS specificity here. To resolve this, adjust the selector in your jQuery code to be more specific than the original rule. One simple way to achieve this is by adding an a before .appari, making it a.appari which matches the specificity of your original CSS.

$("<style>a.appari:focus:after { content: 'New Content'; }</style>").appendTo("head")

$('.appari').click(function() {
  $("<style>a.appari:focus:after { content: 'New Content'; }</style>").appendTo("head");
});
a.appari:focus:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  content: "My content";
  padding: 5px 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="appari">foo</a>

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

Instructions for downloading a .zip file sent through a HTTP response (using an axios PUT request)

When the API responds, it should contain a data property with the .zip file I need. However, the format is unfamiliar to me. The format: https://i.sstatic.net/ruaVR.png I attempted to use .blob() as suggested in similar questions on Stackoverflow, but it ...

Integrating Excel into a webpage - is it possible?

Currently facing an issue on my website. I'm trying to open a 'file://' URL directly with the <a href=""> element in a browser, but it's prohibited. I'm searching for a plugin or similar solution that can enable me to execut ...

Elements with fixed positions in CSS overlapping one another

Hey there, I'm working on a navigation bar and using Jquery to resize elements for better website aesthetics. Instead of a traditional horizontal list, each button is created individually with images: <a href="#" class="button" id="home"><im ...

Explore and target elements using browser inspection

Is it possible to create a new CSS class using browser inspection that contains new hover/focus styles? For example: .CanIDo { /*some css rules (ex.)*/ width: 100; } /*my question (USING BROWSER INSPECTOR, not directly typing in the CSS file)*/ .CanI ...

Guide to transferring a JavaScript/Ajax variable to a PHP webpage with the help of AJAX

function initiateIperfSpeedRequest(speedVar, actualIp) { var xmlhttp = getAjaxObject(); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { handleIperfResponse(xmlhttp.respo ...

Unstyled Cards Failing to Receive Design

I am currently working on creating a prototype that utilizes two Bootstrap 4 cards to display information from a form and store related information from another form in the second card. The current layout of this setup can be observed below: https://i.sst ...

What is the best way to dynamically assign a value to an anchor tag upon each click using jQuery?

How can I pass a value to an anchor tag on every click using jQuery? I am encountering an issue with my current code where the value is not being retrieved when I click the button. //HTML snippet <button id="a-selectNm" data-a_name="<?php echo $row[ ...

Expanding the capabilities of jQuery UI event handling

I am looking for a way to enhance dialog functionality by automatically destroying it when closed, without the need to add additional code to each dialog call in my current project. My idea is to override the default dialog close event. After researching ...

Detach an item from its parent once it has been added to an array

Currently, I am facing an issue with a form on my blog. The blog is represented as an object that contains multiple content objects within it. I seem to be experiencing some confusion because the reactivity of the content I add to the Array persists with t ...

Is the alert message box popping up repeatedly?

html: <div class="box"> <div><p>Hello World</p></div> </div> <input type="button" id="add" value="Add" /> jquery: $(document).ready(function(){ var count = 0; $("#add").click(function(){ $(".box").ap ...

receiving an unidentified value for the JSON data that was returned

$.ajax({ type: "POST", url: "ajax.php", dataType: 'json', data: "callback=bumpup_contact_us_entry&id=" + id, success: function(data){ $.each(data, function(interval, ...

Tips for achieving a standard dropdown appearance in a collapsed navbar with Bootstrap split button dropdown

Trying to create a navbar with a split dropdown button has been a challenge. The design either goes awry when the screen is narrow and the navbar is hidden behind the toggle, or it doesn't look right on a wider screen when the navbar is expanded. Cur ...

The alignment of the Div element is incorrect following a fixed video in bootstrap

When I place a div after the video, the div appears on top of the video instead of after it. Additionally, when I change min-width: 100% to width: 100%, the content appears before the video when I resize the browser. body{ font-family: 'Mina', ...

Some users are experiencing issues with the functionality of the Ajax/Jquery script

Here is the script I have been using on my website to send instant messages. It has been working well in 99.9% of cases, but occasionally a user reports being unable to send messages. Recently, a new report came in from a user using MIE 8.0. Upon checking ...

Error message: `$injector:modulerr - Angular JS` - Indicates an

Currently, I am trying to delve into the world of Angular JS by taking the codeschool course "Shaping up with angular js". The instructor in the videos emphasizes the importance of wrapping code in function(){}. However, upon attempting to do so, an error ...

Implementing universal design in Next.js 14

I'm encountering a problem while trying to use the style jsx global property in the latest version of Next.js. Previously, you would include it in the _app.js file, but since that file no longer exists, I assumed it should be added to the layout.tsx f ...

Error: Unable to locate module '@mui/icons-material/FileDownload'

I have successfully installed both @material-ui/core and @material-ui/icons. Currently, I am attempting to import the icon "FileDownloadIcon" from Material icons. For installing "@material-ui/core", I used the following command: npm i ...

What causes my input field to lose focus in React.js after typing just one character?

My react.js component is experiencing an issue where the input field loses focus whenever a character is typed. To continue typing or editing, I have to click on the input field again. What could be causing this problem? Below is the code snippet in quest ...

Executing a function by click event using the onclick attribute from a file located in the public directory of my project (Next

I'm new to using Next.js and I have a question about how to utilize onclick to execute a function from an external file located in my public folder. Below is my index.js file: import Head from "next/head" import Script from "next/scrip ...

Chrome behaving differently with CSS for pop-out menu

My issue lies with a pop-out menu behaving differently in Chrome compared to IE or Firefox. Below is the HTML code: <body> <ul> <li><a href="url">Level One</a> <ul> <li><a href="url">Le ...