php - Javascript: how to change contenteditable div placeholder color -

i want javascript change placeholder color of contenteditable div when event triggered. javascript/jquery selector big guy?

i tried:

$("#topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before").css({"color":"blue"});  

demo

<div id="topic_content_input" contenteditable="true" data-placeholder="i want change color on click " ></div>  <style>     #topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before {         content: attr(data-placeholder);         float: left;         margin-left: 2px;         color: rgba(134,134,134,0.6);     } </style> 

you can following way using jquery. use addclass.

jquery(function($){      $("#topic_content_input").click(function(){          $(this).addclass('placeholder');      });  });

.topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before {          content: attr(data-placeholder);          float: left;          margin-left: 2px;          color: rgba(134,134,134,0.6);      }        .placeholder[data-placeholder]:not([data-div-placeholder-content]):before {      color: rgba(0,0,255,1);  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="topic_content_input" class="topic_content_input" contenteditable="true" data-placeholder="i want change color on click " ></div>