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; }
Related
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 );
}
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 just saw this question Don't change link color when a link is clicked and now I'm stuck.
I have multiple links on my page, some of them with class="menuLink". Now only for those I want to set the colors different as a normal link. If I would just use
a:link { color:green}
a:hover { color:red }
...
this would apply to all links. But neither
.menuLink:link {color:green}
//I think because the css "doesn't know" that this class is used for links
nor
.menuLink a:link {color:green}
work. How can I achieve this?
You were close.
a.menuLink:link { color: green; }
Was what you intended to achieve. But try this:
a.menuLink { color: green; }
Would mean a a with a classname of menuLink, the :link is redundant.
.menuLink a:link
Would mean a inside of an element with a classname of menuLink.
Have you tried:
.menuLink {color: green;}
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.
I have the following HTML:
<div class="menu">
<a class="main-nav-item" href="home">home</a>
<a class="main-nav-item-current" href="business">business</a>
<a class="main-nav-item" href="about-me">about me</a>
</div>
In CSS, I want to set the a:hover for these menu items to a particular color. So I write:
.menu a:hover
{
color:#DDD;
}
But, I want to set this a:hover color only for those <a> tags with the class main-nav-item and not the main-nav-item-current, because it has a different color and shouldn't change on hover. All <a> tags within the menu div should change color on hover except the one with the current class.
How can I do it using CSS?
I tried something like
.menu a:hover .main-nav-item
{
color:#DDD;
}
thinking that only ones with main-nav-item class will change color on hover, and not the current one. But it is not working.
Try this:
.menu a.main-nav-item:hover { }
In order to understand how this works it is important to read this the way the browser does. The a defines the element, the .main-nav-item qualifies the element to only those which have that class, and finally the psuedo-class :hover is applied to the qualified expression that comes before.
Basically it boils down to this:
Apply this hover rule to all anchor elements with the class main-nav-item that are a descendant child of any element with the class menu.
Cascading is biting you. Try this:
.menu > .main-nav-item:hover
{
color:#DDD;
}
This code says to grab all the links that have a class of main-nav-item AND are children of the class menu, and apply the color #DDD when they are hovered.
Set a:hover based on class you can simply try:
a.main-nav-item:hover { }
how about
.main-nav-item:hover
this keeps the specificity low
try this
.div
{
text-decoration:none;
font-size:16;
display:block;
padding:14px;
}
.div a:hover
{
background-color:#080808;
color:white;
}
lets say we have a anchor tag used in our code and class"div" is called in the main program. the a:hover will do the thing, it will give a vampire black color to the background and white color to the text when the mouse is moved over it that's what hover means.
I found if you add a !important, it works when previously it didn't.
a.main-nav-item:link {
color: blue !important;
}
a.main-nav-item:visited {
color: red !important;
}
a.main-nav-item:hover {
color: purple !important;
}
a.main-nav-item:focus {
color: green !important;
}
a.main-nav-item:active {
color: green !important;
}
Also, I've read somewhere that the order is important. The mnemonic "LoVe HaTe" helps you remember it: link -> visited -> hover -> active
One common error is leaving a space before the class names. Even if this was the correct syntax:
.menu a:hover .main-nav-item
it never would have worked.
Therefore, you would not write
.menu a .main-nav-item:hover
it would be
.menu a.main-nav-item:hover