SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Thailand
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ok to group anchor pseudo elements?

    This has probably been covered before but a search didnt turn up anything. I often use classes like this to specify different link attributes on a page;

    .tx a:link { font-family.......
    .tx a:visited { font-family......

    and the declarations for them are usually the same, so i wondered if i could group these two together? (I dont normally care about hover or active) I know it CAN be done but seems like i remember seeing somewhere that it shouldnt. I think something about browser compatibility but cant remember. Anyone know?

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    You would group them together like so:

    Code:
    .tx a:link, .tx a:visited { font-family.......
    Though if the visited is the same as the a:link you could just leave visited undefined completly. As far as why you should not group them, I dunno other than possible accessibility issues.

    Hope this helps
    Johnny

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could of course just define the anchor and it will define all states in one go.

    Code:
    .tx a {background:red}
    That will define all states of the anchor in one go. The only issue is if you used named anchors (for linking to specific parts of a page etc) in your code and then they all get styled as well. (However you can use id's instead of named anchors anyway.)

    Paul

  4. #4
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Southwest Florida
    Posts
    393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I usually do is set my common attributes in one declaration:

    .tx a {font family: yadayada; font-weight:bold; font-size:whatever; color:#somecolor;}

    And then I declare the different states in their own declaration:

    .tx a:visited {color:#a differentcolor;}
    .tx a:hover {color:#anothercolor;}

    For me, it makes it easier to keep track of what I'm setting for all the links in that class, versus what I'm setting differently for different states.

  5. #5
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Thailand
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok after considerable searching i found the link i was trying to remember;

    http://dbaron.org/css/1999/09/links

    A great article on this subject. The author says "I do not advise grouping them" which is the part i was remembering. But what he means is not to group them all. His advice (for my purposes not caring about hover or active) is to use this;

    .tx :link, :visited {blah blah}

    So link and visited can be grouped together but you have to be careful grouping the others. And it makes sense to lose the a because its not needed and can affect non link anchors. Although Paul's suggestion here is excellent too.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Yes I've seen that article before and the one from evolt. However I agree with one of the posters (in evolts article) who thinks its easier to style the anchor element and then just take care with named anchors. As i use id's instead of named anchors I have no problems.

    Still the article is worth reading and If you want to complicate your code then follow the instructions therein correctly. As long as you follow the directions carefully then that article should provide a good way of styling links etc.

    However I have had to fix peoples code who have got the example wrong.

    See thread:

    http://www.sitepoint.com/forums/showthread.php?t=181874

    Hope thats of some interest

    Paul


Bookmarks

Posting Permissions

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