title: Override CSS for a:link by class
body: <p>In the existing CSS file, we have:</p>
  
  <pre><code>a:link {
      text-decoration: none;
      color: #0486d9;
  }
  
  a:visited {
      text-decoration: none;
      color: #0486d9;
  }
  </code></pre>
  
  <p>Which is fine, but I don't want that style in all cases.  For example, for this link, I want it always white and underlined:</p>
  
  <pre><code>&lt;a id="someId" class="GridviewSort" href="..."&gt;Date&lt;/a&gt;
  </code></pre>
  
  <p>I thought this would do it:</p>
  
  <pre><code>.GridviewSort a:link {
      text-decoration: underline;
      color: white;
  }
  
  .GridviewSort a:visited {
      text-decoration: underline;
      color: white;
  }
  </code></pre>
  
  <p>But it's not. The original style remains. What am I doing wrong?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Thanks, stybl.  For some reason the original blue is still being dominant. But the Underline is working! Here's what's happening:</p>
  
  <p><a href="https://i.stack.imgur.com/djo1A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/djo1A.png" alt="enter image description here"></a></p>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>Ok, further up in the same style sheet is this:</p>
  
  <pre><code>a {
      color: #0486d9 !important;
  }
  </code></pre>
  
  <p>Which is still forcing the link to be blue.  I don't want to change or remove this line because of the impact it might have elsewhere in the site.  Is there a way to override this one too?</p>