Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts

    a & a:hover but no a:visited = OK?

    Hi,

    Regarding the 'a:link :visited :hover :active' combo, is there any reason why I should include all four declarations in my style sheet even if I just want to make use of one? For instance as below:

    Code:
    a {
    	color:#405e95;
    	text-decoration:none;
    }
    
    a:hover {
    	text-decoration:underline;
    }
    Can such code malfunction in some browsers? Or be otherwise bad in some way...?

    Thanks!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    is there any reason why I should include all four declarations in my style sheet even if I just want to make use of one?
    I don't think so, but
    Quote Originally Posted by http://www.w3schools.com/CSS/css_pseudo_classes.asp
    Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

    Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,876
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    No, there is no reason. These pseudo classes are not required anyway. I, for example, am usually writing:
    Code:
    a {…}
    a:hover {…}
    which means that with the first rule all anchor elements are adressed (no matter whether they are a link, have been visited or are active or not) and with the second rule we’re overriding the styles of the first rule on mouseover.

    The difference between a {…} and a:link {…} is that you can have anchors with href attribute (a link) or without (no link) and they are adressed accordingly (i. e. a:link wouldn’t adress anchors without href attribute).

  • #4
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    312
    Thanks
    1
    Thanked 36 Times in 36 Posts
    I always include a:focus (for those navigating without a mouse) and a:active because IE6 seems to react to it in the same way that it should react to a:focus (but doesn't).

    So I suggest that you should use:


    Code:
    a 
    {…}
    
    a:focus,
    a:hover,
    a:active
    {…}
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band


  •  

    Posting Permissions

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