Cascading link styles

[Thomas Mlynarczyk]

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

[tomasio]

"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"

[Thomas Mlynarczyk]

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...)

[tomasio]

"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"

[Thomas Mlynarczyk]

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...