CSS formatting anchor differently based on enclosing div

[Willem]

Hi,

I'm trying to format the anchors enclosed in a div with a certain class to
be formatted differently from the anchors on the rest of the page. The html
is use:

<div class="navigation"><a href="/">home</a> other anchors</div>

Part of the stylesheet:

..navigation { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
10pt; margin-bottom: 4pt}
a.navigation { font-size: 180px; color: #99FF00}

The style for a.navigation is a bit overdone for being sure it works
According to the docs on w3c.org and some other css pages the definition
'a.navigation' should work (at least according to my intrepetation). But it
doesn't.

The links in the div are created by a generic script using SSI so including
a class in the anchors is not really an option.

So is this kind of formatting possible and how?

Regards,
Willem

 

[David Dorward]

I'm trying to format the anchors enclosed in a div with a certain class to
be formatted differently from the anchors on the rest of the page.

Easy. Use a descendent selector:
http://w3.org/TR/CSS2/selector.html#descendant-selectors

.navigation { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt; margin-bottom: 4pt}

Font sizes specified in points are a VERY bad idea:
http://css-discuss.incutio.com/?page=UsingPoints

a.navigation { font-size: 180px; color: #99FF00}

Pixels are better, but still a bad idea:
http://css-discuss.incutio.com/?page=UsingPixels

According to the docs on w3c.org and some other css pages the definition
'a.navigation' should work (at least according to my intrepetation). But
it doesn't.

No. "a.navigation" means "An <a> element that has class 'navigation'". It
does not mean "An <a> element that descends from another element that has
class 'navigation'".

 

[Matt N. Jones]

F> Hi,

I'm trying to format the anchors enclosed in a div with a certain class to
be formatted differently from the anchors on the rest of the page. The html
is use:

<div class="navigation"><a href="/">home</a> other anchors</div>

Part of the stylesheet:

.navigation { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
10pt; margin-bottom: 4pt}
a.navigation { font-size: 180px; color: #99FF00}

You would only use a.navigation if your HTML looked something like this:

<a href="/" class="navigation">home</a>

Looking at the HTML you're using, you need this CSS instead:

..navigation a { font-size: 180px; color: #99FF00}


HTH
Matt

 

[Michael Winter]

On Sun, 3 Oct 2004 20:15:36 +0200, Willem

[snip]

<div class="navigation"><a href="/">home</a> other anchors</div>
[snip]

a.navigation { font-size: 180px; color: #99FF00}
[snip]

So is this kind of formatting possible and how?

Yes, it's just that your selector is backward.

a.navigation

applies to an A element with the class, navigation. What you want is an A
element that is the descendant of another element with the class,
navigation:

.navigation a

Mike

 

[Willem]

Thanks all for the correct answer(s)! '.navigation a {};' does the trick.


Thanks for the extra comments on the stylesheets and the link to this site,
it's very informative.

Pixels are better, but still a bad idea:
http://css-discuss.incutio.com/?page=UsingPixels

I know the basic problems with points & pixels but didn't know the big
difference between mac & pc regarding screen resolution. I already was
planning to offer at least two stylesheets for different font sizes using
server side scripting so the accessibility problem shouldn't be that big of
a problem.

Willem

 

[David Dorward]

I already was planning to offer at least two stylesheets for different
font sizes using server side scripting so the accessibility problem
shouldn't be that big of a problem.

Ah! What a good idea! Break the _normal_ control and then make the user
learn a _different_ control which can't do as much. Clever!

Seriously, some people need very large text, others do not. They know what
they need better then you, so leave the font size of body text alone.