469,625 Members | 1,595 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,625 developers. It's quick & easy.

Cascading link styles

Hi,

I just ran into some problems when I tried to "style" the <a> elements of a
page. Basically, I have something like this:

<div id="left">
<div id="menu">
<a href="bla">Bla</a>
</div>
<a href="foo">Bar</a>
</div>

In reality even a bit more complex, but the point is, I don't quite
understand the rules by which the styles are cascaded, when I use selectors
like #menu a, #left a, a, a:link/hover/active/visited, #left
a:link/hover/active/visited etc. It seems that an a:link is more specific
than #menu a, and that the order in which the pseudo classes are specified
matters. I know that more specific rules overwrite more general ones and
that later rules overwrite earlier ones, but here I don't quite see through.
Could someone please help me?

Thanks in advance,
Thomas

Jul 20 '05 #1
4 1777
"Thomas Mlynarczyk" <bl*************@hotmail.com> schrieb:
Hi,

I just ran into some problems when I tried to "style" the <a> elements of a
page. Basically, I have something like this:

<div id="left">
<div id="menu">
<a href="bla">Bla</a>
</div>
<a href="foo">Bar</a>
</div>

In reality even a bit more complex, but the point is, I don't quite
understand the rules by which the styles are cascaded, when I use selectors
like #menu a, #left a, a, a:link/hover/active/visited, #left
a:link/hover/active/visited etc. It seems that an a:link is more specific
than #menu a, and that the order in which the pseudo classes are specified
matters. I know that more specific rules overwrite more general ones and
that later rules overwrite earlier ones, but here I don't quite see through.
Could someone please help me?

Thanks in advance,
Thomas

Hi Thomas,

You saw things clearly:
"3. those elements with a higher specifity have more weight than those
with lower specifity.

4. Sort by order all declarations applying to a given element. The
later a declaration appears in the style sheet or document, the more
weight it is given[...]" (MEYER, Eric (2004): Cascading Style Sheets.
The definitive guide. USA (O' Reilly Media) p. 69)

I uploaded an example under
http://tomasio.laudatio.com/temp/nested_links.html.
Style Definitions are inside the html-document.
--
kind regards,
tomasio
"describing an issue reveals the way to solve it"
Jul 20 '05 #2
Also sprach tomasio:
Hi Thomas,

You saw things clearly:
"3. those elements with a higher specifity have more weight than those
with lower specifity.

4. Sort by order all declarations applying to a given element. The
later a declaration appears in the style sheet or document, the more
weight it is given[...]" (MEYER, Eric (2004): Cascading Style Sheets.
The definitive guide. USA (O' Reilly Media) p. 69)

I uploaded an example under
http://tomasio.laudatio.com/temp/nested_links.html.
Style Definitions are inside the html-document.


Thank you. I will re-do my stylesheet from scratch. (I noticed that this is
quite an efficient way of sorting out problems...)
Jul 20 '05 #3
"Thomas Mlynarczyk" <bl*************@hotmail.com> schrieb:

Thank you. I will re-do my stylesheet from scratch. (I noticed that this is
quite an efficient way of sorting out problems...)

Freut mich, wenn ich helfen konnte. Ich erinnere mich, dass ich früher
auch schon mal den ganzen code neu schrieb, um klarheit zu bekommen.
--
kind regards,
tomasio
"describing an issue reveals the way to solve it"
Jul 20 '05 #4
Also sprach tomasio:
Thank you. I will re-do my stylesheet from scratch. (I noticed that
this is quite an efficient way of sorting out problems...)

Freut mich, wenn ich helfen konnte. Ich erinnere mich, dass ich früher
auch schon mal den ganzen code neu schrieb, um klarheit zu bekommen.


In diesem Fall hat es mir allerdings nicht viel gebracht. Es funktioniert
zwar alles so wie es soll, aber ich werde das Gefühl nicht los, daß sich
dasselbe Resultat auch auf wesentlich elegantere Weise erreichen lassen
könnte. Außerdem muß man sich ja noch mit den diversen Eigenheiten diverser
Browser herumärgern. So verlangt Opera < 7 offenbar unbedingt "#menu a,
#menu a:link, #menu a:visited {...}", also ein zusätzliches "#menu a" als
Selektor. Wieder ein paar überflüssige Bytes mehr...
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

31 posts views Thread by Axel Dahmen | last post: by
7 posts views Thread by CheGueVerra | last post: by
7 posts views Thread by Marci | last post: by
5 posts views Thread by JezB | last post: by
9 posts views Thread by Radium | last post: by
2 posts views Thread by bruce131 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.