How can I set one style to override another confli

Question

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:

 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 }

and

<tr class="even">
  <td><a class="read" href="example.com">blah</a></td>
</tr>
<tr class="odd">
  <td><a class="unread" href="example.org">foo</a></td>
</tr>

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.

Is it possible to have one style override another when they conflict?

Thanks!

EDIT: updated code to clarify

Solution

 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 }

Answer 1

You can define specificity of your CSS selectors.

a { /* style 1 */ }

would be overridden by

div a { /* style 2 */ }

where div is a parent element of a

More details can be found on Selectutorial.

Answer 2

You can use the !important directive. eg.

.myClass
{
   color:red !important;
   background-color:white !important;
}

Place !important after each style as shown above when you need to override any other styles also being applied.

Answer 3

First of all, if you don't want the browsers own history to interfere with your styles then use the :visited pseudo-class to match the style of the non-visited link, then just apply classes manually based on your DB records.

Regarding conflicting styles, it's all about the specificity of the selector, and if two with the same properties conflict (have the same specificity) the last one "wins".

Do this:

a:link, 
a:visited {
    font-weight: bold;
    color: black;
}

a.read {
    color: #444;
}

Answer 4

One, check your HTML to make sure class="read" and class="unread" are being added to your links.

Two, try adding a in your .read and .unread CSS rules:

a.read { /* ... */ }
a.unread { /* ... */ }

If that doesn't work, try adding a space before !important. I don't think this is required, but most examples I have seen include it.

Answer 5

Try:

a.unread, a:visited.unread {style 1}

a.read, a:visited.read {style 2}