The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Styling two types of hyperlinks differently – – inheritance?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #246301

    I’m trying to style hyperlinks differently, one style for general hyperlinks in the body and anther style for a hyperlink on a ‘go-to-top’ button in the bottom right hand corner. Pen:

    Check out this CSS:
    a:link {color: red; text-decoration: underline;}
    a:hover {color: YELLOW; text-decoration: underline;}
    a:visited {text-decoration: none; color: #106703;}
    a:active {text-decoration: none; color: blue;}

    Pretty standard, right? That’s for the general hyperlinks.

    I am now trying to specify different styles for a got-to-top button hyperlink:
    .go-to-top > a:link { color: black;}
    .go-to-top > a:visited { color: black;}
    .go-to-top > a:hover { color: black;}
    .go-to-top > a:active {color: black;}

    But, as you can see in my pen, my go-to-top calss’ed button inherits the same colored properties as the general hyperlinks. How do I make it so that the go-to-top button hyperlink font is colored black? I do understand that the solution has to do with setting up inheritance properly but I can’t figure out how to fix this.


    You can assign a class to each and then style the classes: {color:#ff0000;} {color:#0000ff;} {color:#ffcc00;}

    a.two:link {color:#ff0000;}
    a.two:visited {color:#0000ff;}
    a.two:hover {font-size:150%;}

    Or, if you want to style links in a named div (linkdiv) use this:
    #linkdiv a {
    text-decoration: none;
    color: #FFFFFF;
    #linkdiv a:visited {
    color: #EEEEEE;
    #linkdiv a:hover {
    color: #DDDDDD;
    #linkdiv a:active {
    color: #CCCCCC;


    The link isn’t a child of .go-to-top but it’s the element itself so no need for a >

    .go-to-top:link {color: black;}
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.