title: Apply style to only nested class of current element
body: <p>I am aware in <code>**CSS**</code> we can apply a set of styles to nested classes in elements (demonstrated at this page <a href="https://stackoverflow.com/questions/9198327/apply-css-rules-to-a-nested-class-inside-a-div">Apply CSS rules to a nested class inside a div</a>).</p>
  <p>I am now trying to apply a style to a nested class in a div. <em><strong>The catch</strong></em> here is I am unable to  apply the style to only the nested class of the currently hovered element.</p>
  <p>To explain further, here is an HTML snippet:</p>
  <pre><code>&lt;div class=&quot;link-wrap&quot;&gt;
       &lt;div class=&quot;link&quot;&gt; Github &lt;/div&gt;
       &lt;hr class=&quot;text-underline&quot;&gt;
  &lt;div&gt;
      
  &lt;div class=&quot;link-wrap&quot;&gt;
       &lt;div class=&quot;link&quot;&gt; Facebook &lt;/div&gt;
       &lt;hr class=&quot;text-underline&quot;&gt;
  &lt;div&gt; 
  </code></pre>
  <p>I would like that if I hover over the Github link, I would alter the style of the <code>&lt;hr&gt;</code> for the Github link alone.</p>
  <p>Currently, when I do alter the style of the <code>&lt;hr&gt;</code>, both of the <code>&lt;hr&gt;</code>s have their styles altered at the same time.</p>
  <p>I am trying to find a non-JS solution.</p>