- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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: http://codepen.io/Angeles4four/pen/pELyjG
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:
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {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;}