a:hover and the like

[WindAndWaves]

Hi Gurus

I have been reading loads of info on this, but it seems I have read too
much.


Can someone help me out and tell me, in simple terms, what I should have on
my stylesheet for pseudo-classes for the anchor object.

Eg.

A { font-size: 15px;}
A:LINK {color: #123456;}
A:HOVER{color: #223456;}
A:VISITED {color: #323456;}

A.ANOTHER:HOVER {text-decoration: none;}

Basically, I am a bit unsure about the syntax for the pseudo classes (e.g.
do you use A:VISITED:HOVER or A:HOVER), and related matters.

TIA

- Nicolaas

 

[brucie]

In alt.html WindAndWaves said:

A { font-size: 15px;}

avoid specifying font sizes in px. consider not specifying any size at
all so the visitors preferred sizes are used.

A:LINK {color: #123456;}
A:HOVER{color: #223456;}
A:VISITED {color: #323456;}

they're in the wrong order.

link
visited
hover
active

see: http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes

A.ANOTHER:HOVER {text-decoration: none;}

Basically, I am a bit unsure about the syntax for the pseudo classes
http://www.w3.org/TR/REC-CSS2/selector.html#pseudo-elements

do you use A:VISITED:HOVER

doesn't make sense.

or A:HOVER)

will apply to all hovered <a>s

 

[bulge]

Hi Gurus

I have been reading loads of info on this, but it seems I have read too
much.


Can someone help me out and tell me, in simple terms, what I should have on
my stylesheet for pseudo-classes for the anchor object.

Eg.

A { font-size: 15px;}
A:LINK {color: #123456;}
A:HOVER{color: #223456;}
A:VISITED {color: #323456;}

looks good. Could also put the a:active thingy in if you wanted.

A.ANOTHER:HOVER {text-decoration: none;}

looks good. "another" being a class named Another (note the dot)

Basically, I am a bit unsure about the syntax for the pseudo classes (e.g.
do you use A:VISITED:HOVER or A:HOVER), and related matters.

a:hover.
a.visited:hover would probably work if you created a class called
"visited" (note the dot), but not a:visited:hover (note the colon).
Dunno if there's a separate hover for visited links, but I doubt it,
and am too lazy to find out

I could be totally wrong since I found this confusing when starting
with CSS too, and sometimes I feel I have learned nothing so I'm
happy to be corrected.

Recent nightmare CSS session has made me loopy.

 

[SpaceGirl]

Hi Gurus

I have been reading loads of info on this, but it seems I have read too
much.


Can someone help me out and tell me, in simple terms, what I should have on
my stylesheet for pseudo-classes for the anchor object.

Eg.

A { font-size: 15px;}
A:LINK {color: #123456;}
A:HOVER{color: #223456;}
A:VISITED {color: #323456;}

A.ANOTHER:HOVER {text-decoration: none;}

Basically, I am a bit unsure about the syntax for the pseudo classes (e.g.
do you use A:VISITED:HOVER or A:HOVER), and related matters.

TIA

- Nicolaas

a.whateverseudoclass

--


x theSpaceGirl (miranda)

# lead designer @ http://www.dhnewmedia.com #
# remove NO SPAM to email, or use form on website #

 

[Steve Pugh]

In alt.html WindAndWaves said:


doesn't make sense.

Yes it does. :visited and :hover are not mutually exclusive and - a
link can be bother visited and hovered.

Under the proposed CSS3 selectors the above is logical and is already
supported by some browsers.

will apply to all hovered <a>s

Including those that aren't links. Using a:link:hover and
a:visited:hover means that the hover styles are only applied to links
not to <a name="foo"> elements.

The browsers that support :visited:hover are also those that apply
a:hover to all <a> elements.

Steve

 

[Sid Ismail]

: Hi Gurus
:
: I have been reading loads of info on this, but it seems I have read too
: much.
:
:
: Can someone help me out and tell me, in simple terms, what I should have on
: my stylesheet for pseudo-classes for the anchor object.
:
: Eg.
:
: A { font-size: 15px;}
: A:LINK {color: #123456;}
: A:HOVER{color: #223456;}
: A:VISITED {color: #323456;}
:
: A.ANOTHER:HOVER {text-decoration: none;}
:
: Basically, I am a bit unsure about the syntax for the pseudo classes (e.g.
: do you use A:VISITED:HOVER or A:HOVER), and related matters.


CSS pseudo-classes

A.blue:visited {color: #003399;}
A.blue:link {color: #003399;}
A.blue:active {color: #003399;}
A.blue:hover {color: red;}

A.white:visited {color: #ffffff;}
A.white:link {color: #ffffff;}
A.white:active {color: #ffffff;}
A.white:hover {color: red;}

and then -

<a href="blah1.html" class="blue">Blue Link</a>
<a href="blah2.html" class="white">White Link</a>


Sid

 

[Beauregard T. Shagnasty]

Quoth the raven Sid Ismail:

CSS pseudo-classes

A.blue:visited {color: #003399;}
A.blue:link {color: #003399;}
A.blue:active {color: #003399;}
A.blue:hover {color: red;}

A.white:visited {color: #ffffff;}
A.white:link {color: #ffffff;}
A.white:active {color: #ffffff;}
A.white:hover {color: red;}

Las Vegas Has Animals

link
visited
hover
active

If not in this order, will not work as you wish.

 

[WindAndWaves]

Hi Gurus

I have been reading loads of info on this, but it seems I have read too
much.


Can someone help me out and tell me, in simple terms, what I should have on
my stylesheet for pseudo-classes for the anchor object.

Eg.

A { font-size: 15px;}
A:LINK {color: #123456;}
A:HOVER{color: #223456;}
A:VISITED {color: #323456;}

A.ANOTHER:HOVER {text-decoration: none;}

Basically, I am a bit unsure about the syntax for the pseudo classes (e.g.
do you use A:VISITED:HOVER or A:HOVER), and related matters.

TIA

- Nicolaas

Thank you for all your replies.

So what I learn is that it actually matters what sequence the items are in.
I never knew that css actually needs to have a special sequence, is that
true? I thought the cascading referred to the hierarchy within the HTML
page only.

Thank you once more. I would still be keen to hear if my idea listed above
is true?

- Nicolaas

 

[brucie]

In alt.html WindAndWaves said:

I never knew that css actually needs to have a special sequence, is that
true?

yes

6 Assigning property values, Cascading, and Inheritance
http://www.w3.org/TR/REC-CSS2/cascade.html

 

[Matt-The-Hoople]

In Beauregard T. Shagnasty <[email protected]> walked into the bar
with a grape in each nostril and said to the bartender:

:: Las Vegas Has Animals

And here I thought it was "Leave Valerie's Hoo-hoo Alone"

-- Matt

 

[Beauregard T. Shagnasty]

Quoth the raven Matt-The-Hoople:

In Beauregard T. Shagnasty <[email protected]> walked into the bar
with a grape in each nostril and said to the bartender:

:: Las Vegas Has Animals

And here I thought it was "Leave Valerie's Hoo-hoo Alone"

Beauregard took the grapes out of his nose and said:

"But this here is a family forum!"

 

[Michael Fesser]

.oO(Steve Pugh)

Yes it does. :visited and :hover are not mutually exclusive and - a
link can be bother visited and hovered.

Under the proposed CSS3 selectors the above is logical and is already
supported by some browsers.

Already part of CSS2 and supported by all recent browsers.

Micha

 

[Michael Fesser]

.oO(Beauregard T. Shagnasty)

link
visited
hover
active

If not in this order, will not work as you wish.

At least the order of :link and :visited doesn't matter. Both are
mutually exclusive, so both LVHA and VLHA will work.

Micha

 

[Michael Fesser]

.oO(WindAndWaves)

So what I learn is that it actually matters what sequence the items are in.
I never knew that css actually needs to have a special sequence, is that
true? I thought the cascading referred to the hierarchy within the HTML
page only.

More than one pseudo-classes (up to three, maybe even more) may apply to
an element at the same time. That's why the order is important in this
case.

Micha

 

[Matt-The-Hoople]

In Beauregard T. Shagnasty <[email protected]> walked into the bar
with a grape in each nostril and said to the bartender:
:: Quoth the raven Matt-The-Hoople:
:::
::::: Las Vegas Has Animals
:::
::: And here I thought it was "Leave Valerie's Hoo-hoo Alone"
::
:: Beauregard took the grapes out of his nose and said:
::
:: "But this here is a family forum!"

.... and then there was brucie looking for PHP's giggly bits ...

-- Matt

 

[Steve Pugh]

.oO(Steve Pugh)


Already part of CSS2 and supported by all recent browsers.

Whoops, yes, and does 'recent' include IE? My recollection was that it
didn't in this case, but I'm not sure.

Steve

 

[Toby Inkster]

link
visited
hover
active

If not in this order, will not work as you wish.

For certain values of "as you wish".

There will be situations where, for example, LHVA may be more useful
(perhaps in situations where it's very important to know which links have
been visited before)

 

[rf]

Steve Pugh

Whoops, yes, and does 'recent' include IE?

IE is *not* a recent browser.

 

[WindAndWaves]

Steve Pugh


IE is *not* a recent browser.

If internet explorer is not a recent browser, then what is? Most people are
using IE so we probably have to take that into consideration for commercial
applications.

- Nicolaas

 

[WindAndWaves]

.oO(WindAndWaves)


More than one pseudo-classes (up to three, maybe even more) may apply to
an element at the same time. That's why the order is important in this
case.

Micha

Thank you all so much for your comments. Really appreciate it.

- Nicolaas