title: How can I set one style to override another conflicting style in CSS?
body: <p>I'm displaying links that get marked as read in a database when a user clicks them. I want to style the clicked and unclicked links based on the database information not the user's browser history. So far, when I use:</p>
  
  <pre><code> 10 a:visited {
   11   color: #444;
   12 }
   13
   14 a:link {
   15   font-weight: bold;
   16   color:black;
   17 }
   18
   19 .read {
   20   color: #444!important;
   21 }
   22
   23 .unread {
   24   font-weight: bold!important;
   25   color:black!important;
   26 }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;tr class="even"&gt;
    &lt;td&gt;&lt;a class="read" href="example.com"&gt;blah&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="odd"&gt;
    &lt;td&gt;&lt;a class="unread" href="example.org"&gt;foo&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>and a link has been visited, but not from this page (it's still marked as unread in the database), I get weird results. For example only the color will work, but the weight won't, etc. </p>
  
  <p>Is it possible to have one style override another when they conflict?</p>
  
  <p>Thanks!</p>
  
  <p>EDIT: updated code to clarify</p>
  
  <h2>Solution</h2>
  
  <pre><code> 10 a:link,
   11 a:visited {
   12   font-weight: bold;
   13   color: black;
   14 }
   15
   16 a.read {
   17   color: #444;
   18   font-weight: lighter !important; /* omission or even "normal" didn't work here. */
   19 }
   20
   21 a.unread {
   22   font-weight: bold !important;
   23   color: black !important;
   24 }
  </code></pre>