title: change the css of anchor tag inside clicked div using jquery
body: <p>I have multiple div with classes </p>
  
  <blockquote>
    <p>.product_wishlist </p>
  </blockquote>
  
  <p>I want to change the color of the particular anchor tag on which the user click inside this div, but now all the anchor tag colors which are inside .pw div are changed. Is it possible to add selected css to the clicked element. Please help to sort out my issue.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(document).on('click','.pw',function(e){
      $('.pw &gt; a').css('background-color', 'green');
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.product_wishlist &gt; a {
      background-color: #e91e63;
      height: 30px;
      position: absolute;
      right: -32px;
      text-align: center;
      top: 15px;
      width: 30px;
      -webkit-transition-duration: 500ms;
      transition-duration: 500ms;
      z-index: 9;
  }
  
  .wishlish-selected &gt; a {
      background-color: black;
      height: 30px;
      position: absolute;
      right: -32px;
      text-align: center;
      top: 15px;
      width: 30px;
      -webkit-transition-duration: 500ms;
      transition-duration: 500ms;
      z-index: 9;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="product_wishlist pw"&gt;
    &lt;a href="#" target="_blank"&gt;&lt;i class="ti-heart"&gt;&lt;/i&gt;Wishlist&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>