Forum Moderators: not2easy
I have container div that has two classes h01 and h02. It encapsulates anchor link. I want to have the anchor link within this div show in different color compared to other anchor links in the html.
How can i say that the anchor link within this specific div will be shown in red color. My approach is as shown below but does not work as expected. I would appreciate any help in knowing what is wrong here?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>test css</TITLE>
<STYLE type=text/css>
.h01 {
FONT-WEIGHT: bold
}
.h02{
FONT-WEIGHT: bold
}
.h01 .h02 A{
COLOR: red;
}
.b01 .c01 A {
COLOR: black
}
.b01 .c01 .link A {
COLOR: black
}
</STYLE>
</HEAD>
<BODY>
<DIV class="h01 h02"><A href="example.com/net/org">Test Heading</A></DIV>
</BODY></HTML>
try
.h01 A, .h02 A{
COLOR: red;
}
I guess what's above is just a trimmed down, testing version, but...to my eye, the xmls namespace declaration looks odd (wrong?) with a 4.01 Transitional loose doctype
Instead of
<HTML xmlns="http://www.w3.org/1999/xhtml">
I have a hunch a plain old
<HTML>
tag would be more standards compliant
or maybe
<html lang="en-GB">
or
<html lang="en-US">
and a charset declaration wouldn't hurt, either
e.g.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
That way, you could use the w3c html and css validators to identify bugs
:)
I would like the anchor link to be red only if container div uses both styles h01 and h02. There are other divs (not in example) that use either h01 and h02 for which i do not want the anchor to be red.
You are correct about the namespace declaration. It got trimmed down while i was trimming down the example. I will update that.
Thanks,
Jay
.h01 .h02 A{
COLOR: red;
}
if that's your unique(ness) then you need to miss out the space. You need some way to target using existing class/id names without the parent>child relationships.. CSS can do that (if you thought it, then so did they)
in order to select an element whch has multi class or ID names then you need to concatenate them
.h01.h02 a{
color: red;
}
unfortunately you may be just a little bit ahead of your time :( IE6 when presented with a multi class target will only read the last class in the selector so therefore all the hard work may mean nothing
but you're right it can be done.. IE7 gets it right which is why this selector has even "got here" :)
[edited by: SuzyUK at 7:39 pm (utc) on July 20, 2008]
