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
Related
Not sure what I did last night but now I get up this morning and chrome seems to be overriding my anchor and input styles. I wish there was a snippet of code I could post here but I have no idea what code could possibly be causing it. i don't want to put !mportant all over the place to fix it so I am hoping someone can look at the test site and figure out what chrome doesn't like.
The headerWidgets at the top of the page (email, phone, and search) should not have decoration and should change color on hover. I can't even place the cursor in the search input anymore. And the nav menu shouldn't have decoration, but the hover works. Go figure. chrome dev tools shows me this:
a:-webkit-any-link { user agent stylesheet
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
and a bunch of user style sheet entries for input
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
is the default styles of webkit for the a tag.
Add a css selector #email a,#phone a and put the styles you want inside. Like this:
#email a,#phone a{
text-decoration:none;
}
and for the hover:
#email a:hover,#phone a:hover{
color:red;
}
A better selector to target all anchor tags inside #headerWidgets
#headerWidgets a {
color: #F00;
}
#headerWidgets a:hvoer {
color: #CCC;
}
And the reason why you cant click on your search box anymore is that div#headerMenuWrapper is blocking the way. On dev tools hover on this element <div id="headerMenuWrapper" class="clearfix"> you will see it covering #headerWidgets
Active property is not working in Firefox; I used this code:
#selec:active{background-color:red;}
The property works in Chrome, but not working in Firefox.
Let me assume that you have really understood what :active means in CSS. It applies style right at the moment when you are clicking. So it those styles wont last long if the page refreshes.
Even though it is not much big deal, there is an order to style these if you applying :hover :link and :visited.
Please check whether you followed them
a:link { /* Essentially means a[href], or that the link actually goes somewhere */
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: green;
}
a:active {
color: red;
}
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 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;
}
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;}