my links turn purple sometimes, probably becouse they are visited or something. I want to disable this from css.
How can i do this?
thanks in advance, yours lovely alexander
by using the visited pseudo-class
Simply set a CSS style which sets the colour for <a> tags.
a {color:blue;}
There are separate pseudo tags for a:link, a:hover, a:visited and a:focus, but unless they're being set elsewhere, you shouldn't need to specify them - if you just specify the style for a as above, it should apply whatever the state of the element.
If the psedo styles are being set and you need to override them, then you'll need something like this:
a, a:link, a:visited, a:focus, a:hover {color:blue;}
(of course you can remove any of the above that you don't want to override)
You can use the selector a:visited.
a:visited {
color : black;
}
In CSS write:
a:visited
{
color: #f00; /*where #f00 is your hexadecimal colorcode, you can use "blue" or an RGBa value too!*/
}
You need to define the visited property for your links.
<style type="text/css">
a:visited {color: #000000}
</style>
Related
I'm trying to change the font color of a link inside a header class. I tried using the code below, but it affected all the links on the page. I've tried different arrangements and can't seem to figure out the correct way.
CSS Code
#amp-wp-header a:active, a:visited {
color:#ffffff;
}
a:hover, a:focus {
color:#ffffff;
}
HTML Code
<header id="#top" class="amp-wp-header">
<div>
Title
</div>
</header>
If you don't care about specific link states, simply do:
.amp-wp-header a {
color:#ffffff;
}
The issue with your approach is that the comma separator is used to indicate separate selectors.
When you do:
.amp-wp-header a:active, a:visited {
color:#ffffff;
}
You're saying:
Assign this color to all a:active elements under .amp-wp-header
Assign this color to all a:visited elements (This one tags the whole document)
Try this:
header.amp-wp-header a:active,
header.amp-wp-header a:visited,
header.amp-wp-header a:hover,
header.amp-wp-header a:focus {
color:#ffffff
}
Try this code,
<header id="#top" class="amp-wp-header">
<div class="spl-for-link">
<a href="http://example.com">
Title </a>
</div>
</header>
.spl-for-link a
{
color:#ffffff;
}
.spl-for-link a:hover,a:focus
{
color:#ffffff;
}
#amp-wp-header a:active, #amp-wp-header a:visited{color:#ffffff;}
#amp-wp-header a:hover,#amp-wp-header a:focus{color:#ffffff;}
First off you are using # which is for ID not for class.
use something like this:
.amp-wp-header > div a{
color: #fff;
}
but it affected all the links on the page.
#amp-wp-header a:active,a:visited{color:#ffffff;}a:hover,a:focus{color:#ffffff;}
If you reformat this (and change the # to a . to designate a class), you get
.amp-wp-header a:active,a:visited{color:#ffffff;}
a:hover,a:focus{color:#ffffff;}
and you can see clearly that in the second rule you are applying the color to all hovered or focused links.
In other words, the first {color:#ffffff} terminates the rule. The following part starting with a:hover is interpreted as an entirely new, separate rule. It is not affected by the .amp-wp-header just because it happens to be on the same line.
So you might think the solution would be to rewrite your CSS as one rule, so that the higher-level selector applies to all the pseudo-class states:
.amp-wp-header a:active, a:visited, a:hover, a:focus {color: #ffffff;}
However, this does not work either, because the .amp-wp-header applies only to a:active. Each member of a "selector group", sometimes called "selector list", the list of selectors separated by commas, is completely independent. In other words, the above is exactly equivalent to
.amp-wp-header a:active {color: #ffffff;}
a:visited {color: #ffffff;}
a:hover {color: #ffffff;}
a:focus {color: #ffffff;}
which will apply the style to all visited, hovered, or focused links, not just those inside .amp-wp-header. Therefore you need to write it as
.amp-wp-header a:active {color:#ffffff;}
.amp-wp-header a:visited {color:#ffffff;}
.amp-wp-header a:hover {color:#ffffff;}
.amp-wp-header a:focus {color:#ffffff;}
For which the equivalent is
.amp-wp-header a:active,
.amp-wp-header a:visited,
.amp-wp-header a:hover,
.amp-wp-header a:focus {
color: #ffffff;
}
Note that in future browsers you will be able to use :matches as follows:
.amp-wp-header a:matches(:active, :visited, :hover, :focus) {
color: #ffffff;
}
For more details, see the MDN page. For compatibility, see this chart. At the moment you will need to use vendor-prefixed versions such as -webkit-any or -moz-any, which makes it less attractive.
Besides understanding how selectors and selector groups work, one lesson here is to format and indent your CSS carefully to help you (and others) see what it means.
I have a pretty noob problem, so I hope someone could help me out.
I have a Blogger blog, and I can't get the links to function like I want to.
I want the links in the post content and in the sidebar - the ones that are a purple shade (#8B7083) and underlined - to look the same for both a:link and a:visited. For some reason visited links turn black, even though I don't have that anywhere in my CSS.
Help me, please?
You do have it in your CSS:
.popular-posts .item-title a:link, a:hover, a:active, a:visited {
color: black !important;
text-decoration: none !important;
}
Try not to use the !important keyword, it overrides all other styles. Use specificity to determine what styles to apply where: http://css-tricks.com/specifics-on-css-specificity/
Looking at your selectors, I believe you might not be constructing them as you intend. Are you looking for this?
.popular-posts .item-title a:link, .popular-posts .item-title a:hover, .popular-posts .item-title a:active, .popular-posts .item-title a:visited
As it stands, your last three segments in your selector (a:hover, a:active, and a:visited) are selecting all links on those pages with those states as you are not constraining them via a descendent selector.
It seems the following variants produce identical results:
/* 1 */
a, a:visited, a:active { color: black; }
a:hover { color: red; }
/* 2 */
a, a:link, a:visited, a:active { color: black; }
a:hover { color: red; }
/* 3 */
a:link, a:visited, a:active { color: black; }
a:hover { color: red; }
Most guidance on the web uses 2 or 3. Why not go for the simplest variant which is 1? I cannot find a good reason to ever apply :link if all you need is one style for normal links and one for hover.
Is it best-practice to not use :link? Why or why not?
I don't care whether the link is visited or not. Both receive the same style. I only care about hover or not hover. This question is not about what the variants do - all do the same thing. It is about what the best variant is. Is one of the variants faulty? Which one is best-practice?
Because not every a is a link.
<a name="table_of_contents">Table of Contents</a>
isn't a link, it's an anchor that can be linked to with <a href="#table_of_contents">.
a will match it, a:link won't.
It is used to differentiate between simple anchors and anchors with href attributes. See demo jsfiddle here.
<style>
a { color: red; }
a:link { color: blue; }
</style>
<a name="anchor">No href</a><br />
With href
EDIT:
For this reason, it is important to cover all cases in your CSS. Option 2 is the only option that completely covers all cases. If you do not have anchor elements without href attributes, you are safe with option 1.
a:link is specifically for links that have not been visited. a applies to all <a> elements.as you said
I don't care whether the link is visited or not
then you may avoid the use of a:link ...use of only a...a:hover...a:active will satisfy your need
and also a:link wont work if there is no href in your anchor but a will do
I suppose you can use
<a>
to create a button so that could produce alternate results...
I always use a:link
It solely depends on your intention, so for your example, I would simply style all anchor elements one color and only change the style when the element is hovered.
a {color: #000;}
a:hover {color: #f00;}
In your case, you are only changing the color of the link when it's hovered. You need to add the hover pseudo element after the base rule otherwise it would be overridden due to the cascading of the style sheet.
If you were to use all of the psuedo elements in this case and you wanted the only difference to be the hover it would look like this:
a:link, a:visited, a:focus, a:active {color: #000;}
a:hover {color: #f00;}
The pseudo-class names are self explanatory:
:link - any unvisited link
:visited - any visited link
:active - when the link is active, e.g. when it's clicked or activated with a keyboard event
:focus - when the link gains focus, e.g. when a user tabs through the elements and it is the selected element
:hover - when it's hovered or moused over
The benefit of using a pseudo-class is that it will have a higher specificity than just targeting the anchor element. However, in your case it may not be needed.
I need to get rid of an underline in a hyperlink.
<div id='something'>
<h2>
<a href='http://somerandomurl'>Photo</a>
</h2>
</div>
I'm using this CSS, but it won't work.
#something h2 a{text-decoration:none}
Here is the css you want:
#something a:link {text-decoration:none;}
#something a:visited {text-decoration:none;}
#something a:hover {text-decoration:underline;}
#something a:active {text-decoration:underline;}
The specific CSS you want to target depends on what exactly you are looking for. For example, if you want all links in 'something' to not be underlined, do what I wrote above. But if you wanted all links to not be underlined, you would not put the #something, etc. Read about context selectors if your not sure what I mean. Here is good link.
http://www.daaq.net/old/css/index.php?page=css+context+selectors&parent=css+syntax
Hope that helps
what is #ugc?
you need...
#something h2 a { text-decoration: none; }
you can also define
a:hover, a:link, a:visited
...if needed for different states
The style you have should work, except the id in your selector is wrong..it should be
#something h2 a{text-decoration:none}
http://jsfiddle.net/V4e8m/2/
a:link, a:visited { text-decoration: none; }
I have to disable the color change of an anchor tag when visited. I did this:
a:visited{ color: gray }
(The link is gray in color before visited.) But this is a way where I explicitly state the color after the link is visited, which is again a color change.
How can I disable the color change of an anchor tag when visited without doing any explicit color changes?
If you just want the anchor color to stay the same as the anchor's parent element you can leverage inherit:
a, a:visited, a:hover, a:active {
color: inherit;
}
Notice there is no need to repeat the rule for each selector; just use a comma separated list of selectors (order matters for anchor pseudo elements). Also, you can apply the pseudo selectors to a class if you want to selectively disable the special anchor colors:
.special-link, .special-link:visited, .special-link:hover, .special-link:active {
color: inherit;
}
Your question only asks about the visited state, but I assumed you meant all of the states. You can remove the other selectors if you want to allow color changes on all but visited.
You can't. You can only style the visited state.
For other people who find this, make sure that you have them in the right order:
a {color:#FF0000;} /* Unvisited link */
a:visited {color:#00FF00;} /* Visited link */
a:hover {color:#FF00FF;} /* Mouse over link */
a:active {color:#0000FF;} /* Selected link */
For :hover to override :visited, and to make sure :visited is the same as the initial color, :hover must come after :visited.
So if you want to disable the color change, a:visited must come before a:hover. Like this:
a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }
To disable :visited change you would style it with non-pseudo class:
a, a:visited { color: gray; }
a:hover { color: red; }
It’s possible to use the LinkText system color value from the CSS 4 Color Module to obtain the browser default value if one wishes to defer to that.
a:visited { color: LinkText; }
link
However note:
These values may also be used in other contexts, but are not widely supported by browsers.
It at least appears to work in Firefox 98 and Chromium 99.
If you use some pre-processor like SASS, you can use #extend feature:
a:visited {
#extend a;
}
As a result you will see automatically-added a:visited selector for every style with a selector, so be carefully with it, because your style-table may be increase in size very much.
As a compromise you can add #extend only in those block wich you really need.
For those who are dynamically applying classes (i.e. active):
Simply add a "div" tag inside the "a" tag with an href attribute:
<a href='your-link'>
<div>
<span>your link name</span>
</div>
</a>
Either delete the selector or set it to the same color as your text appears normally.
You can solve this issue by calling a:link and a:visited selectors together. And follow it with a:hover selector.
a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}
I think if I set a color for a:visited it is not good: you must know the default color of tag a and every time synchronize it with a:visited.
I don't want know about the default color (it can be set in common.css of your application, or you can using outside styles).
I think it's nice solution:
HTML:
<body>
<a class="absolute">Test of URL</a>
<a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>
CSS:
.absolute{
position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
text-decoration: none;
color: transparent;
}
a {
color: orange !important;
}
!important has the effect that the property in question cannot be overridden unless another !important is used. It is generally considered bad practice to use !important unless absolutely necessary; however, I can't think of any other way of ‘disabling’ :visited using CSS only.
Use:
a:visited {
text-decoration: none;
}
But it will only affect links that haven't been clicked on yet.