title: Modify CSS rule of inner tag with Javascript
body: <p>I have something like this:</p>
  
  <p>-HTML-</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr class="x" onMouseOver="light(this)"&gt;
    &lt;td&gt;
      &lt;a href="x"&gt;Link&lt;/a&gt;
    &lt;/td&gt;
    &lt;td&gt;
      Text
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>-CSS-</p>
  
  <pre><code>.x a{
    color: black;
  }
  </code></pre>
  
  <p>-Javascript-</p>
  
  <pre><code>function light(x){
    x.style.color="red";
  }
  </code></pre>
  
  <p>Now, the function works correctly, but my a tag doesn't changes his color. Is there a way to make Javascript modify the attribute color of the CSS rule .x a?</p>