Clever Geek Handbook

When does the "a" tag not inherit the color attribute of the parent tag?

Here is my code: css part

.blue {
    color:#6E99E1;
    font-size:9px;
}

markup

<span class="blue">::<a href="/equipment_new.php">CLICK HERE</a>:: to view our New Equipment inventory. <br /><br /></span>

I somehow caused something that prevented the "a" tag from inheriting the color of the parent tag ("span" here).

+24


source to share


8 answers


By default, an anchor tag does not inherit attributes such as color if the href attribute is present.

Check the difference between the two on the page (I don't understand how to display it in the post):

<span style=color:green><a href="t">test</a></span>


<span style=color:green><a>test</a></span>

The following link to w3 c:



http://www.w3.org/TR/html401/struct/links.html#h-12.2

User agents usually provide links in a way that makes them obvious to users (underline, reverse video, etc.). The exact rendering depends on the user agent. Rendering may vary depending on whether the user has already visited the link or not.

.....

Usually the content of A is not done in any special way, where A only defines the binding.

+29


source


Just an addition to the other answers, if you want your tags to <a>

inherit color from their parent, you can use



a {color: inherit; }
+42


source


I was about to post this as a comment, but he added a bit ... So this is an answer to a question and also an answer to Kevin's Answer and his comments.

Anchor marks inherit color, whether they are linked or not. The only reason they are not in practice is because they already have their color in the default stylesheet in the browser. The same can be said for the underline of a link (which I suppose you didn't notice because you really want it or have already changed it yourself).

In Firefox, you can see this in Firebug if you toggle "Show CSS User Agent" (or you can look at Firefox's internal stylesheets . You can see the browser settings in the Webkit Web Inspector and Opera Dragonfly. I don't think you can in IE ...

I don't know of a single site that has an overview of all browser settings. A CSS2 "informative" HTML4 stylesheet as well as a YUI reset stylesheet would be a good starting point, but none of them mention any (link) colors (the HTML4 stylesheet mentions underscores).

To find out which properties are inherited in general, you can use the CSS2 Reference Property Index Table (see the Inherited? Column). SitePoint also mentions it in the CSS link .

So, if you want your link to inherit its color from its parent and not from the browser's default stylesheet, you would ideally do something like this:

.blue a:link {
    color: inherit;
}

You can set it for different pseudo-classes separately (for example :visited

, :hover

and :active

) or for a tag a

.

However, IE6 and IE7 do not support the keywordinherit

, so if you want to support them too, you must set the color explicitly.

+7


source


I think it a

doesn't inherit the default color. (of course it has always worked that way on my sites). Why not change

.blue {
    color:#6E99E1;
    font-size:9px;
}

to

.blue, .blue a{
    color:#6E99E1;
    font-size:9px;
}
+5


source


Firebug will show you which style rules apply to elements. This is perfect for this.

(Possibility without CSS: do you have attributes link/alink/vlink

in the tag <body>

?)

Edit : Spirit, stupid, others do it right - <a href>

doesn't inherit color. But Firebug is still a good tool for this kind of problem (even if I don't. 8-)

+3


source


In addition to firebug (which should be your first port of call), the IE developer toolbar will also tell you where this style came from, just in case IE - shock, horror - should be different.

+1


source


You will probably see a: visited coloring. Try the following:

.blue, .blue:link, .blue:visited {
  color:#6E99E1;
  font-size:9px;
}
+1


source


You need to explicitly set the color of the links to override the default blue.

0


source






More articles:


All Articles