[thelist] CSS inheritance

pandion pandion at gmx.net
Sun Jun 23 03:47:01 CDT 2002


Joel Canfield wrote:
>I've defined a style called 'quote' with the color and font info I want.
>I've tried adding 'class="tag" ' to the <a> tag, a <div> around the entire
>link, the <p> the link lives in; nothing works. It picks up the italics of
>the 'quote' style, but ignores the color and background-color
>specifications.
>
>Here's the style for links:
>
>a:link {
>font-size:1em;
>color:#3333ff;
>text-decoration:none;
>background-color:transparent;
>}
>
>Here's 'quote'
>
>.quote {
>font-size:12px;
>font-style:italic;
>color:#9e6363;
>background-color:transparent;
>}
>
>Here's the code wherein the offending anchor exists:
><p>
><a href="http://egbdf.info/quotedetails.asp?QuoteID=2" class="quote">There's
>a time to search for understanding;<br />
>sometimes you just gotta sing . . .</a>
></p>


If a lurker should dare... ;)

It happens because the first selector (a:link)  has higher specificity than
the second (.quote) and specificity is considered before the order. If you
change the second selector to from just ".a" to "a.quote" it will have the
same specificity as "a:link" (I think...ahem) and the rules should behave
as you expected.

http://www.w3.org/TR/REC-CSS2/cascade.html#cascading-order
http://www.w3.org/TR/REC-CSS2/cascade.html#specificity

pandy











More information about the thelist mailing list