1 reply [Last post]
paulpsd
Offline
Regular
Last seen: 14 years 48 weeks ago
Joined: 2004-11-24
Posts: 23
Points: 0

I've got a stylesheet that determines the way that links appear within any table cell specified as a certain class. For example, I have links in a table cell that begins like this: <td class="navManagement">
In my stylesheet, I specify how links appear and behave in that table cell this way:

.navManagement a:link {
	color: #DBC9D5;
	text-decoration: underline;
	font-size: 13px;
	font-weight: bold;
}

.navManagement a:hover {
	color: #FFFFFF;
	text-decoration: none;
}

The problem is that sometimes I want certain links to behave differently than that, even though they're in that table cell. Sometimes certain links should appear highlighted to show which section of the site you're in. So I've created a new style, "navSelected."

a.navSelected {
	color: #FFFFFF;
	text-decoration: underline;
	font-size: 13px;
	font-weight: bold;
}

Then I apply that style to a certain link within the navManagement table cell, like this:
<a href="#" class="navSelected">Management</a>
I was expecting that the above link would appear white (#FFF). However it doesn't. It still appears in #DBC9D5, as specified by the style applied to the whole table cell.

How can I get a link within this table cell to appear differently?

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 43 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Exceptions in text styling

(1) Make sure that your second declaration falls after the first in your stylesheet.

(2) Target it more specifically. Try this:

td.navManagement a.navSelected { ... }

Life's a b*tch and then you die!