...

View Full Version : Displaying links using CSS



vikram8jp
02-18-2009, 07:36 AM
hello all

I have a very basic CSS question.

I have to a list of database records on my webpage. These are being displayed in a table. Alternate rows of the table have different backgrounds. Now one of the columns of the table has to contain a link. How can I make the background color of link also alternate with every row.

tr.even
{
background-color: #f2f2d5;
}
tr.odd
{
background-color: #d0d0a9;
}


Simply speaking I can create two separate classes of links same as I did for rows. But I am looking for a better way in CSS. Can anybody suggest something?

Thanks and Regards
Vikram

rangana
02-18-2009, 08:04 AM
You can make use of CSS 3 nth-child() pseudo-class to target odd/even elements:


tr:nth-child(even) {
background-color: #f2f2d5;
}

tr:nth-child(odd) {
background-color: #d0d0a9;
}


Apparently, it's support is (yet) limited to Chrome, Konqueror, Opera 9.5 (as per time being)

For further reading:
http://www.w3.org/TR/css3-selectors/#nth-child-pseudo
http://kimblim.dk/csstest/#ex7c
http://reference.sitepoint.com/css/pseudoclass-nthchild

You can however make us of JS to ease the job for you, but that is if you are opting for it.

Hope that helps.

vikram8jp
02-18-2009, 08:20 AM
Thanks Rangana.
No I don't want to use JavaScript. Rather can't use it now, having become a fan of CSS. :D

And the thing you suggested, if it doesn't work on firefox, IE, then may be I should not be going into it.

I found a better way. I had the following structure...

html content
------------------------------------

<tr class='even'>
<td><a href='#'>Link1</a></td>
</tr>
<tr class='odd'>
<td><a href='#'>Link1</a></td>
</tr>

CSS content
-------------------------------------


tr.even {
background-color: white;
}
tr.odd {
background-color: green;
}
a:hover, a:active {
background-color: orange;
color: white;
}
a:visited, a:link {
text-decoration: none;
color: inherit;
}


This way, I am able to display the link in whatever color the row is in. Although see those underlined parts for "color" property. They don't work. On hovering over the link the text-color does not change to white.

Can anybody explain why?

Thanks and Regards
Vikram

rangana
02-18-2009, 08:27 AM
td a:hover, td a:active {
background-color: orange;
color: white;
}
td a:visited, td a:link {
text-decoration: none;
color: inherit;
}

abduraooft
02-18-2009, 08:28 AM
On hovering over the link the text-color does not change to white.

Can anybody explain why? There may be some other more specific selectors overriding the above selector. See www.htmldog.com/guides/cssadvanced/specificity

You may easily track them by firebug. Could you post a link to your page(a sample)?

vikram8jp
02-18-2009, 09:32 AM
@ Rangana

Thanks for the trick Rangana. Although I did it like this....

td a:hover, td a:active {
background-color: orange;
color: white;
}
td a:visited, td a:link {
text-decoration: none;
color: inherit;
}

Removed those shaded areas. That worked.

@ Abduraooft

The material you suggested taught me the concept of specificity (Hard to pronounce, but equally effective :D ) Thanks a lot.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum