title: Is there any possibility to do the click event with css?
body: <p>I would like to display apple in green color (bg color) instead of mango in red colour (bg color) on <strong><code>click</code></strong> on the mango, I know it's possible with <strong><code>hover</code></strong> or using <strong><code>javascript</code></strong>. Is there any way to do it with <strong>css</strong>  on <strong>mouse click</strong>?</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-css lang-css prettyprint-override"><code>#two
      {
          display:none;
      }
      #one
      {
        background-color :red;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;html&gt;
        &lt;head&gt;
         &lt;link rel="stylesheet" type="text/css" href="hov.css"&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;div id="one"&gt;
            &lt;p&gt;mango&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="two"&gt;
            &lt;p&gt;apple&lt;/p&gt;
          &lt;/div&gt;
       &lt;/body&gt;
      &lt;/html&gt;
  
  
      </code></pre>
  </div>
  </div>
  </p>