title: change color of child element onclick parent element in html
body: <p>In the given snippet, I have given the code and I expect the result that on the parent div when I click again the default color should apply on the child element. but the condition is the code should be as minimal as possible.</p>
  
  <p>need a solution(if possible) without .toggleclass, .toggle, .addclass, .removeclass.</p>
  
  <p>thank you.</p>
  
  <p><strong>*EDITED</strong> Thank you so much all of you for your valuable answers. I appreciate that. motto=> improve your knowledge bank.</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>$('li').click(function() {
    $(this).children().css({
      "color": "red",
      "border": "2px solid red"
    });
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ancestors * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body class="ancestors"&gt;body (great-great-grandparent)
    &lt;div style="width:500px;"&gt;div (great-grandparent)
      &lt;ul&gt;ul (grandparent)
        &lt;li&gt;li (direct parent)
          &lt;span&gt;span&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;li (direct parent)
          &lt;span&gt;span&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;li (direct parent)
          &lt;span&gt;span&lt;/span&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>