I am trying to add an icon to all unvisited links on a particular Wordpress category page.
Here is the CSS code I'm using. I have put it at the bottom of my last CSS file.
.category-xyzzy .entry-title a:link {
background-image: url("/new-star.png");
background-repeat: no-repeat;
color: pink;
}
.category-xyzzy .entry-title a:visited {
background: none;
}
The weird thing is that the background image is being added to all links (visited or unvisited) but the pink colour is only being applied to the unvisited links.
This is happening in multiple browsers.
The fact that only the unvisited links are being coloured pink would seem to indicate that my first selector is working properly, but I can't understand why the background image, which appears in the same CSS rule and nowhere else is being applied to all links.
In fact I only added the second rule which matches against a:visited as an attempt to force the issue. The problem occurs whether the second rule is specified or not.
Are you viewing in Chrome? You will probably find that it DOES work in FF. But that will stop soon probably. More here: Google chrome a:visited background image not working
You could add important to your unvisited link.
.category-xyzzy .entry-title a:visited {
background: none !important;
}
Related
From my understanding :visited styles links that have been visited and :link styles links. I noticed that you cant set the background-color with :visited unless you also set a background-color with :link, why is this?? This leads me to think they are different, if so how are different, other then one styles the links and the other visited links?
for example:
https://jsfiddle.net/kk1ouqvc/11/
<a href="https://en.wikipedia.org/wiki/Main_Page">
wikipedia
</a>
/***
a:visited{
background-color: red;//doesnt work
}
**/
/***
a:visited{
background-color: red;// works
}
a:link{
background-color: blue;
}
***/
Here is a answer from https://tympanus.net/codrops/css_reference/visited/ that helped me to understand some times ago. You have to set a background-color on element before it has beeing visited
There’s also an “anomaly” related to the background-color applied to a link using :visited: the background color in the :visited state won’t be applied to the link unless an actual “real” background color is applied to the link prior to its visited state—that is, in its :link state.
How do you avoid the annoying grey background that IE 10 applies to anchors when you click them?
There is actually a really easy CSS fix. IE 10 changes the background-color of anchor tags when they are in the :active state. To stop it from happening or to change the colour you can use the CSS rule below.
a:active{
background-color: transparent; /* Can be any colour, not just transparent */
}
Live demo: http://jsfiddle.net/tw16/NtjK7/
On a side note, it's worth mentioning that when styling links you need to ensure that you write the rules in the correct order to ensure that previous styles don't get overwritten:
a:link{} /* 1st */
a:visited{} /* 2nd */
a:hover{} /* 3rd */
a:active{} /* 4th */
I found it was actually :focus that added the grey background.
this worked for me:
a:focus {
background-color: transparent;
}
I haven't been able to find many information but I did found one fix:
Wrap the text of the anchor in a span
Working Solution
If you don't want to change every anchor in your HTML you can use a script like this one:
$("a:not(.dont-use-span)").each(function() {
$(this).html("<span>" + $(this).html() + "</span>");
});
Working solution
Note: just add the class dont-use-span to the anchors that you don't want to modify
After many unfructuous tests, I finally made it works with this :
a {color:#fff; background-color:#f77927 !important;}
a:hover {color:#fff; background-color:#e65e06 !important;}
a.active {color:#fff; background-color:#e65e06 !important;}
a.focus {color:#fff; background-color:#e65e06 !important;}
See in action
I am trying to change the color of a link. It is defaulted to blue and I want to override it. I did the following:
#site-links a:link{color:red;}
and in Chrome's Inspect Element that was the style which overrode all other styles. However, the link remained blue. In Firefox, however, the link is now red.
How can I fix this?
:link targets specifically a link you have not visited. I'm going to go ahead and assume that in chrome you have visited it. You can fix it by targeting each case as you need it:
a:link { color: red; } /* unvisited link */
a:visited { color: blue; } /* visited link */
a:hover { color: green; } /* mouse over link */
a:active { color: yellow; } /* selected link */
One way to give higher priority to your rule is stating important in it.
a:link { color: red ! important }
Also, when in Chrome inspector , to better control what is happening, you can force the state of the inspected element
When in the element inspector, go to the top of the "styles" bar in the right pane. There is an option that states:
"toggle element state"
There you can check / uncheck the :visited status
I am trying to change the link color of one of my tab buttons but its not working. Its strange because all the other attributes under the same curly braces are working just fine but the attribute clor:#FFFAFA is not working. I have set it against a #778899 background so that the former's snow-white color is visible.
Here's the code.
a:link
{
color:#FFFAFA;
text-decoration:none;
background-color:#778899
}
it is always purple and never changes
Here is the code where I implement it
<dl class="profileTab">
<dd class="profileTabContents">Personal Infomration</dd>
<dd class="profileTabContents">Education, Employment & Activities</dd>
<dd class="profileTabContents">Sports & Athletics</dd>
<dd class="profileTabContents">Entertainment & Attractions</dd>
<dd class="profileTabContents">Philosophy & Society</dd>
</dl>
Well this should be working, but it is probably overwritten by your browser with a default "visited" link color. Change your CSS to:
a, a:link, a:visited {
color: #FFFAFA;
text-decoration: none;
background-color: #778899;
}
It might be because the links are visited.
http://www.w3schools.com/css/css_link.asp
a:link {color:#FFFAFA;} /* unvisited link */
a:visited {color:#FFFAFA;} /* visited link */
a:hover {color:#FFFAFA;} /* mouse over link */
a:active {color:#FFFAFA;} /* selected link */
This is because the link you have opened is stored as visited in the browser.
Delete your history or the links of your page with which you are working from the history will do your work.
Try it. This is the solution.
Works for me - http://jsfiddle.net/ZS2Vn/
That colour is too faint to notice a change from the white background of the page. Try setting a slightly darker foreground colour.
color: #EFEAEA; or color: #DFDADA;
And of course, like others have answered, you should have pseudo selectors for visited, active and hover as well.
I think the problem occurs because you are missing a semicolon on the background-color line.
It seems that a:visited won't work in showing background color on my links.
http://jsfiddle.net/davestein/D2srA/
What super simple thing am I missing?
The background-color on a:visited only seems to work (as Dave said above, in FF, Chrome and Safari) if the normal a has a background-color, either explicitly defined or through inherit (the direct parent must actually have a background-color for this to be true).
Obviously it is not ideal to have to define a background-color for a all the time, as the site may have a background image.
CSS bug..?
try a) setting a default background color (like #fff) and b)removing !important, as shown here:
http://jsfiddle.net/D2srA/10/
I'm not sure of the technical reason here, but this only seems to work for me if I add a background-color for a:
a {
background-color: #ffffff;
}
a:visited {
background-color: #ff0000;
}
it doesn't work for me if I do it like you do. But if I add every pseudo-class it works. E.g.:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF; background-color:black;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
!important always does the truck
a:active {color:#0000FF !important;}
a:visited {color:#0000FF !important;}