Hi,
I can't seem to grasp why the folowing doesn't work as I expect it to and would appreciate an explanation.
Given <style type="text/css">
.test{
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
A.test:link{
color: #660000; text-decoration: none;
}
A.test {
color: #ff0000;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
.main {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
A:link{
color: #006600; text-decoration: none;
}
A:hover {
color: #00ff00;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
</style>
<td class="main">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"...">Link A</a></td>
<td class="test" >
<a href=http://www.webdeveloper.com/forum/archive/index.php/"...">Link B</a></td>
If I use it as shown, the first link appears as it should. However, the second link is also displayed using the color from the default anchor class. Why isn't it picking up the test clsss? If I move the class="test" to the anchor so that it is <a class="test" href=http://www.webdeveloper.com/forum/archive/index.php/"...">Link B</a></td>, the link works. But I thought that since the class was declared as .test, it would apply to any tag I place it in. Can someone please point out what I am missing? I would like to be able to do this:<tr class="test">
<td>Some Text>
<a href...
and have Some Text displayed using the test class and have the anchor use the a.text class. Any ideas?A.test:link{
color: #660000; text-decoration: none;
}
A.test {
color: #ff0000;
Those are contradictory. By definition an anchor is a link so you're saying an anchor with class "test" has two different colors.
A:link{
color: #006600; text-decoration: none;
}
A:hover {
color: #00ff00;
Those say by default all anchors are dark green and are bright green when hovered. Part of the "cascading" aspect of styles is "specificity". The more tightly a style is bound to an element, the more precidence it has. You actually don't have the appropriate selector for what you want to do. That would be ".test a", an anchor inside an element with the class "test".Oops, sorry about that but the second a.test should have been a.test:hover.
As for the other, are you saying .test a is what ties the anchor to the class test? I thought that using .test and a.test would do that. I just tried it as .test A {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #00ff00;
}
a.test:hover {
color: #ff0000;
}but with the same results - it is still using the other anchor class.
JackTo clarify: it is using the default achor class for hover.
Jack.test a:hoverThe colors change correctly now in that they follow whatever is set in .test A and .test Hover but the font size is being picked up from a different class now. There just doesn't seem to be any rhyme or reason to it. I have this defined in the stylesheet:TD.main A:Hover,P.main A:Hover {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
} If I change the font size to 20px, the font size will change on a hover over my anchor which is set up as<td class="test">Some text</td>
<a href... The main class is used in a table prior to this one but I thought the use of the test class here would override that.
JackThe selector rules are specific and consistent. Some browsers are more equal than others when it come to parsing them, though.
<!-- m --><a class="postlink" href="http://www.westciv.com/style_master/academy/css_tutorial/index.html">http://www.westciv.com/style_master/aca ... index.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/references/index.html">http://www.meyerweb.com/eric/css/references/index.html</a><!-- m -->
And see below for printed info.Thanks for all of your help. I've been through the docs all over the web. That's why I was using a.test:link instead of .test A since I found that mentioned in several places as the way to do it. I guess it is a lot harder problem to solve than I thought.
Jack
I can't seem to grasp why the folowing doesn't work as I expect it to and would appreciate an explanation.
Given <style type="text/css">
.test{
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
A.test:link{
color: #660000; text-decoration: none;
}
A.test {
color: #ff0000;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
.main {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
A:link{
color: #006600; text-decoration: none;
}
A:hover {
color: #00ff00;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
</style>
<td class="main">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"...">Link A</a></td>
<td class="test" >
<a href=http://www.webdeveloper.com/forum/archive/index.php/"...">Link B</a></td>
If I use it as shown, the first link appears as it should. However, the second link is also displayed using the color from the default anchor class. Why isn't it picking up the test clsss? If I move the class="test" to the anchor so that it is <a class="test" href=http://www.webdeveloper.com/forum/archive/index.php/"...">Link B</a></td>, the link works. But I thought that since the class was declared as .test, it would apply to any tag I place it in. Can someone please point out what I am missing? I would like to be able to do this:<tr class="test">
<td>Some Text>
<a href...
and have Some Text displayed using the test class and have the anchor use the a.text class. Any ideas?A.test:link{
color: #660000; text-decoration: none;
}
A.test {
color: #ff0000;
Those are contradictory. By definition an anchor is a link so you're saying an anchor with class "test" has two different colors.
A:link{
color: #006600; text-decoration: none;
}
A:hover {
color: #00ff00;
Those say by default all anchors are dark green and are bright green when hovered. Part of the "cascading" aspect of styles is "specificity". The more tightly a style is bound to an element, the more precidence it has. You actually don't have the appropriate selector for what you want to do. That would be ".test a", an anchor inside an element with the class "test".Oops, sorry about that but the second a.test should have been a.test:hover.
As for the other, are you saying .test a is what ties the anchor to the class test? I thought that using .test and a.test would do that. I just tried it as .test A {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #00ff00;
}
a.test:hover {
color: #ff0000;
}but with the same results - it is still using the other anchor class.
JackTo clarify: it is using the default achor class for hover.
Jack.test a:hoverThe colors change correctly now in that they follow whatever is set in .test A and .test Hover but the font size is being picked up from a different class now. There just doesn't seem to be any rhyme or reason to it. I have this defined in the stylesheet:TD.main A:Hover,P.main A:Hover {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
line-height: 1.5;
} If I change the font size to 20px, the font size will change on a hover over my anchor which is set up as<td class="test">Some text</td>
<a href... The main class is used in a table prior to this one but I thought the use of the test class here would override that.
JackThe selector rules are specific and consistent. Some browsers are more equal than others when it come to parsing them, though.
<!-- m --><a class="postlink" href="http://www.westciv.com/style_master/academy/css_tutorial/index.html">http://www.westciv.com/style_master/aca ... index.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/references/index.html">http://www.meyerweb.com/eric/css/references/index.html</a><!-- m -->
And see below for printed info.Thanks for all of your help. I've been through the docs all over the web. That's why I was using a.test:link instead of .test A since I found that mentioned in several places as the way to do it. I guess it is a lot harder problem to solve than I thought.
Jack