Tuesday, December 6, 2011

link styles: what is the proper order...

Hi all



I am having trouble with my link states styles:



a:link{color:#9C6;}

a:hover{color:#FFF;}

a:visited{color:#000;}



It seems that in this order, the hover state does not show on
visited links; it only changes to

white on non-visited links...



I tried to change the order (placing a:visited before
a:hover, or a:visited before a:link, etc.) but

I am just getting more confused.

All in all I would like to understand the logic of what
happens exactly depending on which order

these three link states are written, and why. Is there a
''inheritence'' with these styles? aren't

they independent from one another? why does the order matter?



Thanks





--

seb ( ---@webtrans1.com)


http://webtrans1.com | high-end web
design



An Ingenious WebSite Builder:
http://sitelander.com

link styles: what is the proper order...
Link

Visited

Hover

Active




http://www.projectseven.com/tutorials/css/pseudoclasses/




http://meyerweb.com/eric/css/link-specificity.html



--

Regards



John Waller





link styles: what is the proper order...
.oO((_seb_))



%26gt;I am having trouble with my link states styles:

%26gt;

%26gt;a:link{color:#9C6;}

%26gt;a:hover{color:#FFF;}

%26gt;a:visited{color:#000;}



LVHA or VLHA



Some also add F (:focus) before or after H, dependent on the
effect you

want to achieve.



%26gt;All in all I would like to understand the logic of what
happens exactly

%26gt;depending on which order these three link states are
written, and why.



It's nothing special. It just happens what always happens in
CSS when

two or more rules apply to the same element. In such cases
it's simply a

question of selector specificity and maybe the order to
determine which

of the rules takes precedence.



%26gt;Is there a ''inheritence'' with these styles? aren't they
independent from

%26gt;one another? why does the order matter?



Quite simple. V and L are mutually exclusive, because of
course a link

can't be visited and unvisited at the same time. But all
other pseudo-

classes may apply at the same time (up to four currently) - a
link can

all be visited, active, hovered and even focused if you use
this pseudo-

class.



Micha

No comments:

Post a Comment