www.webdeveloper.com
Results 1 to 7 of 7

Thread: a vs a:link

  1. #1
    Join Date
    Jul 2007
    Location
    Wisconsin
    Posts
    468

    Question a vs a:link

    is there a difference (significant or otherwise) between using a {...} and a:link {...}?

    I've got 2 different pages at work, put together by the same "design team". One lists the css as [a, a:visited, a:hover, a:active], while the other uses [a:link, a:visited, a:hover, a:active].

    My first guess is that "a:link: applies only to what would be a 'true' hyperlink, where as "a" would apply itself to any anchor tag (href, name, ect.).

  2. #2
    Join Date
    May 2007
    Location
    Cleveland, OH
    Posts
    1,403
    In my experience, there has never been a difference whether I use the :link pseudo-class or not. I normally don't add the :link because I'm lazy, but thinking of it like that makes it easy for me to remember the order the classes must be in.
    LoVe HAte
    1. Link
    2. Visited
    3. Hover
    4. Active

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I have started using "a:focus" in my link stylings, to assist non-mouse 'clicks', like for 'hotkeys' and other non-pointer tool actions.

    a:link {...}
    a:visited{...}
    a:hover{...}
    a:focus{...}
    a:active{...}

    and if you're a STAR WARS fan, remember:
    Lord Vader's Handle Formerly Anakin.

    Anagrams.
    I build for: Firefox and tweak for IE

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Listing all the psuedo classes in a statement such as a, a:visited, a:hover, a:active { } is pointless as the first a includes all psuedo state classes. Using a { } will cover all states, meaning only any changes required to the psuedo classes needs to be defined.

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I had to re-read your post a few times before, yes!! -that was why! The 'pseudo classes' are for when an anchor changes due to some action, focus or event (like a pointer-tool hovering over it, a 'hot-key' moving over it, or a left-or-right mouse button pressed-down on it, etc... Some 'event' needs to occur).

    A 'regular' anchor would not do this. Or you may require some 'regular anchors' to not behave dynmically, so we use a {...} for them..
    I build for: Firefox and tweak for IE

  6. #6
    Join Date
    Jul 2007
    Location
    Wisconsin
    Posts
    468
    Thanks for the clarification between a {...} and a:link {...}.

    to clarify: each of the pseudo-classes have varied definitions;
    Code:
    a {color: #fff;}
    a:visited {color: #000;}
    a:hover {color: #ccc;}
    a:active {color: #999;}
    and are not listed in one string,
    Code:
    a:visited, a:hover, a:active {text-decoration: none;}

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by OctoberWind
    Thanks for the clarification between a {...} and a:link {...}.

    to clarify: each of the pseudo-classes have varied definitions;
    Code:
    a {color: #fff;}
    a:visited {color: #000;}
    a:hover {color: #ccc;}
    a:active {color: #999;}
    and are not listed in one string,
    Code:
    a:visited, a:hover, a:active {text-decoration: none;}
    If "a:visited, a:hover, a:active" all share the same Delcaration of " {text-decoration: none;}" then yes, this is correct. It is actually good shorthand', otherwise you'd be writing it like:

    Code:
    a:visited {text-decoration: none;}
    a:hover {text-decoration: none;}
    a:active {text-decoration: none;}
    The shorthand method removes two instances of "{text-decoration: none;}" and you have saved your several bytes right there.
    Applied consisitanty & correctly, this can reduce your CSS remarkably.

    It's perfectly okay to list a Selector several times, if necessary...

    example:

    h1, h2, h3, h4, h5, h6 {color:#000; background-color:#fff; font-family:arial, verdana, serif; font-weight:normal}
    h1 {font-size:2.1em;}
    h2 {font-size:1.9em;}
    h3 {font-size:1.8em;}
    h4 {font-size:1.6em;}
    h5 {font-size:1.4em;}
    h6 {font-size:1.2em;}
    which is clearly smaller than:

    h1 {font-size:2.1em; color:#000; background-color:#fff; font-family:arial, verdana, serif; font-weight:normal}
    h2 {font-size:1.9em; color:#000; background-color:#fff; font-family:arial, verdana, serif; font-weight:normal}
    h3 {font-size:1.8em; color:#000; background-color:#fff; font-family:arial, verdana, serif; font-weight:normal}
    h4 {font-size:1.6em; color:#000; background-color:#fff; font-family:arial, verdana, serif; font-weight:normal}
    h5 {font-size:1.4em; color:#000; background-color:#fff; font-family:arial, verdana, serif; font-weight:normal}
    h6 {font-size:1.2em; color:#000; background-color:#fff; font-family:arial, verdana, serif; font-weight:normal}
    Last edited by WebJoel; 11-07-2007 at 05:39 PM.
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles