How can I selectively change text using a CSS class?

Question

I need to add a CSS/HTML 'fragment' to a page to change the text in the following:

<div> 
    <h3 class="category-heading">Keep this text:</h3>
</div>
<div> 
    <h3 class="category-heading">**Change this text**:</h3>
</div>

I have tried the following:

<style>
    h3.category-heading {
        text-indent: -9999px;
    }
    h3.category-heading::after {
        content: “New and Featured Products”;
        text-indent: 0;
        display: block;
        line –height: 120%;
    }
</style>

But this changed both instances of the text.

Is it possible to specify the second instance of the css class to be changed? or is it possible to select and change the wording in the second css class by adding a html fragment?

Answer 1

Why not to use an id attribute?

<h3 class="category-heading" id="itemThatShouldBeChanged">**Change this text**:</h3>    

and than just #itemThatShouldBeChanged {content:"other text"}

Answer 2

Supposing you can use Javascript by including it an HTML fragment :

Depending on the inclusion mecanism (we need to know more about the tools you use), something containing :

<script>
     window.onload = function(){
          document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
     }
</script>

If the first solution breaks some features of your website (because It could override defined behaviour), you should use :

<script>
    document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
</script>

Answer 3

You should take a look at nth-child Be aware that this is CSS3

this will give you the following css selector :

 div:nth-child(2) h3.category-heading::after