tags:

views:

520

answers:

5

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 }
+2  A: 

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.

Ash
I updated the code in the question. !important doesn't change the results. Thanks though!
ThomasGHenry
No problems. I think web browser support for styling anchor tags using pseudo selectors varies. Have you tried it in different browsers?
Ash
just firefox so far
ThomasGHenry
+1  A: 

Try

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

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

HTH, Ria.

Ria
it's the same deal; i tried it. thanks though.
ThomasGHenry
+2  A: 

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;
}
Jack Sleight
thanks. i tweaked it a little (see edit above), but this was basically what did it. I had to explicitly use "lighter". ...weird
ThomasGHenry
Not too sure why "normal" wouldn't work, weird. You shouldn't need !important on your font-weight property as the selector has a higher specificity. And you don't really need the "unread" class at all. Omitting the "read" class from the element will have the same effect.
Jack Sleight
A: 

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.

Mark Hurd
+1  A: 

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.

strager