info To participate please Register or Login.

Selecting link elements based on their state

By Simon on September 30th, 2006. Published in CSS.

CSS lets you easily control your links look and style based on their current state. And with that I mean if the visitor is hovering their cursor on top of them, whetever the links have been visited etc.

Okey, so this is the style of all your links. Your links will all be red, no mather if a visitor is for example hovering their cursor on top of them.

a:link {color:red;}

Duplicate that line of code four times. So it looks like this:

a:link {color:red;}
a:link {color:red;}
a:link {color:red;}
a:link {color:red;}
a:link {color:red;}

Now on the second line replace “link” with “visited”.
And on the third line replace “link” with “focus”.
I think you understand this now. Continue to change your code until it looks like the code below:

a:link {color:red;}
a:visited {color:red;}
a:focus {color:red;}
a:hover {color:red;}
a:active {color:red;}

Here is a brief explanation of the different states you have entered:

link = Make changes to the appearance of links that haven’t yet been or currently aren’t being clicked or pointed at.
visited = Changes the appearance of links that the visitor already has visited.
focus = If the link is slected via the keyboard and is ready to be activated.
hover = Changes appearance when the visitor pointer hovers over a link.
active = Changes appearance of the link when a visitor clicks on the link.

You can now continue working on the different link styles. It could in the end look something like this:

a:link {color:#000000;text-decoration:none;}
a:visited {color:#000000;text-decoration:underline;}
a:focus {color:#000000;text-decoration:none;}
a:hover {color:#000000;text-decoration:underline;}
a:active {color:#000000;text-decoration:none;}

A web design and web development agency offered their business customers standard business web site design, business application development, web page design and also photoshop design services at reasonable rates. Their customized web hosting services aimed to serve individuals as well as small and big business clients’ needs. Keeping in view the band width requirements of large enterprises they usually offer them colocation hosting rather than dedicated hosting.

One Response

Express yourself. Tell us your opinion. Make a comment!

  • Trackback by Web 2.0 Announcer
  • Write your comment

    Warning Spam and inflammatory comments will be deleted. If this is the first time you make a comment on Easy Webbers it will be held for moderation before being published.