Thanks very much!
I used your solution #1 (removing the "div" from "div.column-
content). (#2 wasn't general enough for all the contexts I want to
use it.) And that worked: it underlined what I needed to have
underlined.
Thanks, too, for the two additional resources. The "Calculating a
selector's specificity" at
http://www.w3.org/TR/CSS21/cascade.html#specificity
will be a helpful tool in recalibrating my intuition about specificity!
Jim
--
Jim Ratliff
[EMAIL PROTECTED]
http://virtualperfection.com/jim/
On Sep 5, 2006, at 5:22 AM, francky wrote:
> Jim Ratliff wrote:
>
>> By default, my links within a certain <div> are not underlined.
>>
>> div.column-content a {color: #ff0080; text-decoration: none;}
>>
>> However, I want some of those links to be underlined. So for
>> those, I defined a style:
>>
>> a.force-link-decoration {text-decoration: underline; }
>>
>> To apply this style to the selected links, I add a class attribute
>> to the <a> tag:
>>
>> <a class="force-link-decoration"
>> href="mailto:[EMAIL PROTECTED]">Decorate me!</a>
>>
>> In the style sheet, the definition of "div.column-content a"
>> comes first and the definition of "a.force-link-decoration" comes
>> later.
>>
>> The way I understand things, because the "a.force-link-
>> decoration" comes later, its definition of text-decoration (viz.,
>> underline) should trump the "text-decoration:none" in the earlier
>> definition of "div.column-content a". And therefore the links
>> with class="force- link-decoration" should be underlined.
>>
>> But, to my surprise, though perhaps not yours,
> :-)
>
>> these links are NOT underlined.
>>
>> If I comment out the style definition of "div.column-content a"
>> in the style sheet, the desired links do get underlined as desired.
>>
>> I'd really appreciate it if someone could enlighten me why the
>> '<a class="force-link-decoration"' doesn't trump the fact that
>> the link is a descendant of the div. What I mean is: An "a" link
>> of a particular class seems like it should be more specific than
>> an "a" link which is merely a descendant of a div.
>>
>> The HTML and CSS files are located, respectively, at
>>
>> http://grandlakeguardian.org/force-decoration-test.html
>> http://grandlakeguardian.org/force-decoration-text.css
>>
>> Thanks in advance for any help!
>>
>> Jim
>>
> Hi Jim,
> I think the order of the css lines doesn't have influence:
>
> div.column-content a {text-decoration: none;}
>
> means:
> 'every <a> in a <div> with class="column-content" has to get no
> underline',
> while:
>
> a.force-link-decoration {text-decoration: underline;}
>
> means:
> 'unless specified elsewhere in another way, every <a> in the
> document with class="force-link-decoration" will get an underline'.
> Now in this case an <a> in the div.column-content is more specific
> than a general <a>, and wins: no underline.
>
> Solution 1:
> delete the prefix "div" in the first rule, so:
>
> .column-content a {text-decoration: none;} a.force-link-
> decoration {text-decoration: underline;}
>
> Now both are equal in order, but the underline is in a more
> specific element, and wins.
>
> Solution 2:
> add the div-rule for the deco link inside it, so:
>
> div.column-content a {text-decoration: none;}
> div.column-content a.force-link-decoration {text-decoration:
> underline;}
>
> Literature:
> The SelectOracle <http://penguin.theopalgroup.com/cgi-bin/
> css3explainer/selectoracle.py>,
> CSS2.1 info on Cascading Specificity <http://www.w3.org/TR/CSS21/
> cascade.html#specificity>.
>
> Greetings,
> francky
>
>
>
>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
