ansaurus

Question

Overridding a:link

Answer 1

+2 A:

.menuItem a:link{
color: black !important;
}

Chacha102 2010-03-24 22:10:19

That's not an ideal solution - should be able to use the cascade effect to make this work.

Grant Palin 2010-03-24 22:15:31

@Grant Palin : that is right, css can sort of "override" the general style definition with a more specific one. So having a !important or not should not be critical to the solution

Michael Mao 2010-03-24 22:40:10

Answer 2

A:

Working on a sample code now. But Is your div tag having an Id of menuItem or a class of menuItem? This is my guess.

Edited : Okay, now I see. If you separate the css to another file and use a link tag to import it in, then it should be fine without using the !important command, see this :

body {background-color : green;}

a:link{ color : white;}

.menuItem a:link
{
color : black;
}

And this :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11"&gt;
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test page</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div>
    <a href="#">This is a link</a>
</div>
<div class="menuItem">
    <a href="#">This is a link in div menuItem</a>
</div>
</body>
</html>

Hope this helps:)

Still, if I embed the css snippet into the html, then it doesn't work... Wondering why?

Michael Mao 2010-03-24 22:13:10

I would think a class, as there are probably many menu items.

Chacha102 2010-03-24 22:14:25

@Chacha102 : now I see your problem, working on it to resolve it...

Michael Mao 2010-03-24 22:20:36

Answer 3

+1 A:

With respect to Chacha102, I don't think the solution is ideal. !important is a kludge, and a better way to handle this would be to make use of the document structure to add some specificity. Assuming your .menuItem elements have a common parent, perhaps a div with an id of menu, you could revise your menu-specific link style as follows:

#menu a:link {
    color: black;
}

The extra specificity should cause the more specific rule to take effect for those menu items.

Grant Palin 2010-03-24 22:32:19

This is a good suggestion to the html structure, but I reckon the problem comes from embedding css directly into the html page or not. If you take my sample code and access it in XAMP, then you can see the difference. So with repect to the original question, yeah, it is feasible, I am afraid it has to be two files rather than one.

Michael Mao 2010-03-24 22:36:36

ansaurus

tags:

views:

answers:

Overridding a:link

related questions