Replace content css via JQuery

Question

I want to replace the content from a tag in CSS via jQuery.

In this case the content "My content" to "New Content".

I have this CSS code :

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 tried this 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

  }
}

Thanks for helping.

Michael Coker · Accepted Answer · 2017-04-11 19:43:17Z

2

You're running into a CSS specificity issue. Change the selector in your jQuery to have enough or more specificity than the original rule. You can just add an a to .appari so it's a.appari (matches your original CSS specificity)

$("<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>

answered Apr 11, 2017 at 19:43

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

emiliano Over a year ago

Thank you very much! Now Works!

Collectives™ on Stack Overflow

Replace content css via JQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related