Link Not Inheriting Color From Div

[Planet13]

I can't seem to style the link color inside of a Div and have no idea why not.

<div class="home-testimonial">Be sure to <a href="http://www.example.com">Click Here</a> for more info.</div>

I have tried styling it with ALL of the following CSS tags:

a.home-testimonial,
a.home-testimonial:link,
a.home-testimonial:hover,
a.home-testimonial:active,
a.home-testimonial:visited {
color:#E7BA7F;
}

.home-testimonial a:link,
.home-testimonial a:visited,
.home-testimonial a:hover {
color: #E7BA7F;
}

Neither way works.

It is instead using the color for the general a tags (defined earlier in the style sheet).

When I look at the inspector in firefox, the color: #E7BA7F; is crossed out.

Aren't a links supposed to inherit the styles from their parent Divs?

[not2easy]

If those links are as shown and aren't labeled with

<a class="home-testimonial" href="... 

they will use the last specified properties for anchors, which is what it sounds like they're doing. Divs are not parents to all elements they might contain.

[lucy24]

The first group are all wrong for the same reason: they pertain to "a class = 'home-testimonial'" and there ain't no such class.

The second group ought to work, so they're getting overridden. Some possibilities:
div[class] a {blahblah}
or
div.home-testimonial a {blahblah}
or even
almost-anything-here a:link {blahblah}

Is the link really lying loose in the named div, or did you simplify for posting? Other than the quoted lines, does your css say anything whatsoever about "a"? That would be the first place to look.

Aren't links supposed to inherit the styles from their parent Divs?

Sure, but only if there's something to inherit. If you meant

div.home-testimonial a {color: inherit;}

that's a whole different matter, and I don't think it is what you meant.

Oh, and a final possibility: If there's an error at any point in the CSS, any remaining styles will simply be ignored. Does the CSS validate?

[Planet13]

Ok, a couple of things:

First: I had my color wrong. I actually had 7 digits for the hex-decimal color, so it was:

color:#E7BA7FFF;

So that was part of the problem.

LETS TRY THIS A DIFFERENT WAY:

Instead of trying to fix my code - which is probably more wonky than it is right,let me ask you exactly how I SHOULD BE DOING THIS in the first place.

Assuming that for MOST of the html document I want the background color to be white and the links to be blue, I have the CSS correct.

Now suppose I want a box in the document with a blueish background, padding of 10px, margin of 10px, text color of white.

.home-testimonial {
background-color: #739cba;
padding: 10px;
margin:10px;
color: #ffffff;
text-align: center;
}

And also suppose that I want the color of ALL the links appearing in this box to be YELLOW.

How would I set up my style definitions so that they would all be yellow?

(I would prefer to avoid going into every link and saying <a class="yellow" ... )

Thanks in advance.

[Selen]

.home-testimonial a {color:yellow}

[lucy24]

If your overall CSS specifies a:link, a:visited and so on, you'll need to name the same pseudo-classes in your div-specific code. Otherwise the existing narrower selector can/may/will override the new, more general selector. (The C part of CSS can get very, very complicated.)

[Planet13]

@ Selen: Thank you for the code.

@ Lucy24:

If your overall CSS specifies a:link, a:visited and so on, you'll need to name the same pseudo-classes in your div-specific code.

so what you are saying is that in that case, I should modify Selen's code to be like this:

.home-testimonial a:link, .home-testimonial a:visited, .home-testimonial a:hover, {color:yellow}

Or does it need to be written differently?

[lucy24]

And get rid of that final comma, because it may break the rule.

That's assuming your overall CSS has separate declarations for a:link, a:visited and so on.