[css-d] Specificity question
I'm having trouble with a moderately extensive site which has
only a rudimentary implementation of CSS. This is the CSS coding
relevant to my question:
4.
5. a {
6. color: #99;
7. text-decoration: underline;
8. font: bold 10px Verdana, Arial, Helvetica, sans-serif;
9. }
10. a:hover {
11.color: 99;
12.text-decoration: none;
13.font: bold 10px Verdana, Arial, Helvetica, sans-serif;
14.}
15.
I'm trying to give a specific link a different style, but this
code:
16. #alt a:link {blah}
and this code:
16. div#alt a:link {blah}
and even this code:
16. div#alt a:link {blah}
17. div#alt a:active {blah}
18. div#alt a:hover {blah}
19. div#alt a:visited {blah}
does not work, either with or without the leading 'div'. Nothing
seems able to override the pseudo classes called out on lines 5
and 10 of the CSS sheet. Since I didn't want to go through the
several score of pages to give all the other links an ID, I am
faced with abandoning the idea of a different link style.
What can I do?
Reese
--
Ink Works
http://www.inkworkswell.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Specificity question
At 12:40 12-07-05, Sebastian Redl wrote:
You can check your style sheet carefully for syntax errors that would
make the UA ignore your styles, because as you have them now, they're
correct and should override the earlier styles.
That's what I thought. Rebooting seemed to help, now I can make the
line 5 underline go away but this next bit defies explanation (by me):
This coding works:
#order a:link {
text-decoration: none;
font-weight: 900;
font-style: italic;
}
#order a:active
{
text-decoration: none;
font-weight: 900;
font-style: italic;
}
#order a:visited {
text-decoration: none;
font-weight: 900;
font-style: italic;
}
#order a:hover {
text-decoration: none;
font-weight: 900;
font-style: italic;
}
but this coding does not work:
#order a:link {
text-decoration: none;
font: 900 italic;
}
#order a:active
{
text-decoration: none;
font: 900 italic;
}
#order a:visited {
text-decoration: none;
font: 900 italic;
}
#order a:hover {
text-decoration: none;
font: 900 italic;
}
The underline is still gone (after rebooting) but the text is not
bold nor is it italicized. Any ideas what is going on with this?
If I do
#order a:link a:visited a:hover a:active {
text-decoration: none;
font: 900 italic;
}
then nothing here has any effect, all the earlier styles apply themselves
to the new link.
A thought, I am using span/span tags to give different bits of
text in the div#order link different colors, could that be interfering
with the shorthand?
Reese
--
http://www.inkworkswell.com
1+ 727-942-9255
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Specificity question
The O'Reilly CSS Pocket Reference by Eric Meyer states:
This is a shorthand property used to set two or more aspects of an
element's font all at once. It can also be used to set the element's
font to match an aspect of the user's computing environment using
keywords such as icon. Note that if these keywords are not used, **the
minimum font value must include the font size and family in that
order**.
If I understand what he's saying, if you throw in font size and family,
such as
font: italic 900 100% verdana;
it works (for me). You probably don't want to specify that every time,
so maybe shorthand isn't the solution in this case.
Also,
#order a:link a:visited a:hover a:active
Doesn't work because that is descendant selector format.
#order a:link, #order a:visited, #order a:hover, #order a:active
Would accomplish what you want.
Sarah
--
At 12:40 12-07-05, Sebastian Redl wrote:
You can check your style sheet carefully for syntax errors that would
make the UA ignore your styles, because as you have them now, they're
correct and should override the earlier styles.
That's what I thought. Rebooting seemed to help, now I can make the
line 5 underline go away but this next bit defies explanation (by me):
This coding works:
#order a:link {
text-decoration: none;
font-weight: 900;
font-style: italic;
}
#order a:active
{
text-decoration: none;
font-weight: 900;
font-style: italic;
}
#order a:visited {
text-decoration: none;
font-weight: 900;
font-style: italic;
}
#order a:hover {
text-decoration: none;
font-weight: 900;
font-style: italic;
}
but this coding does not work:
#order a:link {
text-decoration: none;
font: 900 italic;
}
#order a:active
{
text-decoration: none;
font: 900 italic;
}
#order a:visited {
text-decoration: none;
font: 900 italic;
}
#order a:hover {
text-decoration: none;
font: 900 italic;
}
The underline is still gone (after rebooting) but the text is not
bold nor is it italicized. Any ideas what is going on with this?
If I do
#order a:link a:visited a:hover a:active {
text-decoration: none;
font: 900 italic;
}
then nothing here has any effect, all the earlier styles apply
themselves
to the new link.
A thought, I am using span/span tags to give different bits of
text in the div#order link different colors, could that be interfering
with the shorthand?
Reese
--
http://www.inkworkswell.com
1+ 727-942-9255
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Specificity question - FIXED
At 14:44 12-07-05, Smith, Sarah wrote:
If I understand what he's saying, if you throw in font size and family,
such as
font: italic 900 100% verdana;
it works (for me). You probably don't want to specify that every time,
so maybe shorthand isn't the solution in this case.
A ha. Thank you for that info, that makes sense and I see the reason
for the issue now. I'll have to price that handbook.
Also,
#order a:link a:visited a:hover a:active
Doesn't work because that is descendant selector format.
#order a:link, #order a:visited, #order a:hover, #order a:active
Would accomplish what you want.
Yes, I brainfarted that. The comma part anyway, another list member
pointed out offlist, the full selector needs to be called out. He
suggested putting them on separate lines, thus:
#order a:link,
#order a:visited,
#order a:hover,
#order a:active {blah}
Which seems eminently intuitive, to me. I cannot foresee making that
same mistake again while using this formatting tip.
Reese
--
http://www.inkworkswell.com
1+ 727-942-9255
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Specificity question
Reese wrote:
I'm having trouble with a moderately extensive site which has
only a rudimentary implementation of CSS. This is the CSS coding
relevant to my question:
4.
5. a {
6. color: #99;
7. text-decoration: underline;
8. font: bold 10px Verdana, Arial, Helvetica, sans-serif;
9. }
I'm trying to give a specific link a different style, but this
code [does not work]:
16. #alt a:link {blah}
Your first selector a applies to all states of all links. However,
a:link only applies to unvisited links. So if you have followed
the link and have not cleared your browser history, the first
selector will apply even when the second does not.
even this code:
16. div#alt a:link {blah}
17. div#alt a:active {blah}
18. div#alt a:hover {blah}
19. div#alt a:visited {blah}
does not work
Assuming you have the correct ID in the HTML, this should work,
although your rule order may cause confusion on hover. The rules
should always appear in LVHA order (LoVe HAte, if you need a
mnemonic). The way you have the rules ordered, the visited rule,
being last, will supercede the hover rule, so your visited links will
not appear to change on hover.
You later wrote:
#order a:link a:visited a:hover a:active {
text-decoration: none;
font: 900 italic;
}
That doesn't select what you think it does. The correct syntax would be:
#order a:link, #order a:visited, #order a:hover, #order a:active {blah}
Note the order of the declarations is not relevant here, but the
commas are required. Note also that I reiterated the #order part of
the selector to keep the specificity the same throughout.
I would recommend that you check the list Wiki/FAQ (address at the
end of each list message) to find a good selector/shorthand tutorial.
I think a quick review of how selector syntax works might be helpful
for you.
--
-Adam Kuehn
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
