I have links
I am trying to make link #one black on :visited and #two blue. When visiting #two reverse should apply #one should be blue and #two should be black. I am trying to color the last visited link black and others to default. I tried
a {
color:blue;
}
a:visited ~ a:not(:visited){
color:red
}
I am trying to achieve this with just CSS without using JS.
a {
color:blue;
}
a:visited{
color:black;
}
Related
I'm slowly learning html/css. I have a client that wants 3 links on the page to be noticeable link colors (in this case, blue). However, when I try to edit the style of the links, only two of them are showing the changes.
I can't set it globally, or other links (such as some social media icons) are changing.
Here is what I've tried:
div.entry-content a:link {
color: blue;
}
entry-content a:link {
color: blue;
}
Here is what I'm looking at when I inspect the page:
So, where am I going wrong? I hope I added everything needed for assistance. Thanks.
I'm assuming all three links are wrapped in in div with class entry-content. The only thing I can think of is that the first link is black or darker color because it's active or visited. You can style your links with just a selector or with additional pseudo selectors.
/* Just a selector */
.entry-content a {
color: blue;
}
/* Just a selector */
.entry-content a,
.entry-content a:visited,
.entry-content a:active {
color: blue;
}
It seems you have clicked on the link earlier, so the link status is active or visited.
Try this, if ok then update your code with pseudo selectors :active and :visited:
a, a:link, a:visited, a:active {
color: blue;
}
Hope this help!
Try adding a class name to the anchors, like so:
<a class="blue" href="url">link text</a> and then in your css create the blue class .blue { color: blue; }
There is a problem that i can't solve.
I am trying to make button from text by changing it on hover. I am using css to change their font color or background color on hover. There is no problem to this point.
But when i give them a link <a href="www.twitter.com"> I have a problem because at this point my css doesn't work because of html's link hover and visited functions.
The big problem is visited .. i don't want the visited color to work. If visited color works, my links doesn't look like good.
If you can help me about links in texts (making hover) without problem of active section...
Thanks
By giving the link ("a") the css propertie text-decoration:none; the element wont use the underline and visited color any more.
a{
text-decoration:none;
color:white;
}
a:hover{
color:red;
}
div{
background-color:#000;
}
http://jsfiddle.net/7rrruajb/1/
Hope this is what your looking for.
a:visited{
text-decoration:none;
}
Just use a instead of a:link - a applies to unvisited and visited link, a:link just unvisited ones.
Compare the two:
a:link
a:link {
color:red;
}
a:hover {
color:white;
}
<div style="background-color:#666">
hello
</div>
a
a {
color:red;
}
a:hover {
color:white;
}
<div style="background-color:#666">
hello
</div>
I've just wasted an afternoon figuring out that the a:visited selector in CSS has all attributes disabled apart from a handful that are directly related to colour (see here: http://www.impressivewebs.com/styling-visited-links/ ).
Anyway, I'm wondering if it's possible to unset an attribute set for a:link? I have an a:link selector that fills in the background with a CSS gradient, but it would be nice if this could go grey for a:visited.
According to the new implementation, you can set background-color for a:visited, but unfortunately this gets overridden by the background attribute for a:link because a:visited can't use background now.
All I'd like to do is unset background for a:visited so that background-color is used. Does anyone know if this is possible?
use a instead of a:link for background color
see fiddle here
a{
background: green;
}
a:visited{
background: orange;
}
Give your hyperlink a display style of inline-block
a{
display: inline-block;
background-color: red;
//this becomes the default bgcolor; override it in subsequent pseudo state styles
}
This allows you to specify background colors for your hyperlinks.
You have to normally specify the styles for hyperlinks in the following order
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
In this order the visited link style overrides the normal link style. So, your css for visited will be applied after you click the link.
Make sure that you declare a:visited after the a. Otherwise the a will overrule it.
a {
background: #ff0000;
}
a:visited {
background: url( none );
}
When I define a color for :visited it seems to go back to the parent's color first before applying the color for the :hover style:
body {
color:black;
}
a {
color:inherit;
-webkit-transition:ease 3s;
}
a:visited {
color:pink;
}
a:hover, a:visited:hover {
color:yellow;
}
JsFiddle
Is there a hack/fix for this?
This is because Firefox does not allow certain styles on :visited, for privacy reasons.
How can I make a link in HTML turn a color when hovering and remove the underline using CSS?
You want to look at the :hover pseudoselector, the color property, and the text-decoration property.
a:hover { color: red; text-decoration: none; }
To assure your hyperlink is styled as you want (and does not conflict with other style rules), use !important:
a:hover { color: red !important; text-decoration: none !important; }
Also in addition to stragers answer, make sure to declare the pseudo classes in the LoVe HAte way. You have to declare :link first, then :visited, then :hover and then :active. Otherwise some browsers may not apply the pseudo classes.
a:link{
/*this only apllies to named anchors*/
}
a:visited{
/*possible styles for visited links*/
}
a:hover{
/*when mouse hovers over a-tag*/
text-decoration:none;
color:red;
}
a:active{
/*possible styles on active (when a-tag is clicked)*/
}