Welcome to WebmasterWorld Guest from 54.198.52.8

Forum Moderators: not2easy

Message Too Old, No Replies

Link Not Inheriting Color From Div

     
11:27 pm on Jan 21, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member planet13 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 16, 2010
posts: 3823
votes: 29


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?
12:12 am on Jan 22, 2016 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3451
votes: 181


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.
12:15 am on Jan 22, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:14036
votes: 522


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?
12:44 am on Jan 22, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member planet13 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 16, 2010
posts: 3823
votes: 29


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.
2:23 am on Jan 22, 2016 (gmt 0)

Full Member

joined:Dec 11, 2013
posts:229
votes: 38


.home-testimonial a {color:yellow}
4:02 am on Jan 22, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:14036
votes: 522


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.)
6:00 pm on Jan 22, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member planet13 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 16, 2010
posts: 3823
votes: 29


@ 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?
9:26 pm on Jan 22, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:14036
votes: 522


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.