i wonder why i can't use, or should not use
a { ... }
vs
a:link, a:visited { ... }
If you only style a {...} then the style will be applied to all anchor elements including <a name="..."></a> elements, which define an anchor within the page, but do not reference a hyperlink.
a:link {...} specifically relates to hyperlinks. :visited, :hover and :active are different states of these links. Note that :hover and :active can apply to other elements as well.
You may provide the general style for your links with the a only. More specific styles can than be applied to the pseudo-classes. For example:
a {
text-decoration: none;
font-weight: bold;
}
a:link {
color: #00F;
}
a:hover {
color: #F00;
}
a:visited {
color: #888;
}
a:active {
color: #0F0;
}
In this example, all links are styled bold and are not underlined. But the color changes for each type of link...
It's just a matter of it you want to have different styling for a visited link vs normal links or not (for example dim out the link, I was already there).
Just a is valid, but do you want to give :visited or :hover links special styling for example?
:visited means you are trying to give a link a styling that has been visited by the user before and :hover means you are trying to give a link a style when a user mouse overs that link. You may or may not use it. This is your choice.
a:link if for an unvisited link, while a:visited is for a link that the user has visited. Usually the user will want some way to differentiate between the two in which case you'll style them separately. If you don't want any differences (e.g. a menu) then just a will do.
While the first a refers to all links, :link and :visited refers to specific states of those links.
The first one refer to non-visited links, and the latter to visited one. see http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes for more infos.
If you style a {...} it is work like a:link, a:visited {...}. Also a:link can't override a {...} style but a:visited can. If you want to add style all state of a it is better to use a {...}. Also a:link only apply a elements which have href attriubute.
Related
I was trying styles with a:visited, a:link, etc... and I found these 2 issues with a:visited:
why is font-size of a:visited ignored and a:link used instead
why is background-color not showing depending on whether a:link has background-color property or not
Example
a:link {
/*background-color:#ff8000;*/
font-size: 28px;
}
a:visited {
font-size: 12px;
background-color: grey;
color: #10aaf0;
}
I googled a bit and read in w3schools that most of the styles are inherited from a:link for security/privacy issues, but what I don't understand is why background-color only works when I explicitly set it in a:link and then modify it in a:visited.
TL;DR:
What's the difference between explicitly set background-color for
a:link to let a:visited apply its own background-style?
Is it still sensitive to those browser history query attacks through CSS?
It seems to behave the same way in the browrsers I tried: Chrome 45 and in IE 11.
I can't speak of security issues since I haven't heard of such thing associated with anchor tags. But a:link selector in most of the cases acts like a since it's applied to anchor tags with href attribute. And a:visited only applies to links which user has visited before. Other than that you should be aware of the order of declaring your styles.
For example take a look at this: http://codepen.io/anon/pen/ojzwgY
It works as expected in Firefox, Safari and Chrome
I've styled links using CSS like the example below.
This is working as expected in Chrome however with IE8 I'm having this problem:
When you first visit the page all links do not have underline as expected.
If I hover on them they get underlined as expected.
If then visit the link the underline disappears as expected however if I again hover on them I don't get the underline anymore.
Any ideas...?
Thanks
a:link {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}
a:active {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}
a:hover {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:underline !important;}
a:visited {color:#0064cc;font-family:Arial;font-size:13px;text-decoration:none !important;}
Your problem comes from the fact that your links aren't styled in LVHA order. You should style them with :link first, then :visited, then :hover, then :active for consistent cross-browser results.
Additionally, any style applied to :link doesn't need to be reapplied to :visited, :hover, or :active unless you want to override it with a different value. For example, when you declare text-decoration:none for :link, you don't need to put that in any other definitions except for :hover, where you want to override it to none. Since all of the styles except for :hover are the same, you can kind of bypass the LVHA order here:
a:link, a:visited, a:active {
color: #0064cc;
font-family: Arial;
font-size: 13px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Hope this helps!
Edit
Although your issue isn't related to your use of !important, it is generally a good idea to avoid using it. It leads to some pretty non-semantic CSS. It's better to have a comprehensive understanding of the order in which CSS selectors are applied (it's not as simple as you might think!). Check out the MDN's documentation for more info.
Try to list the different selectors in the correct order.
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
Also, you should not use !important. This can cause you problems later.
Src: http://www.w3schools.com/css/css_link.asp
Just have a read about CSS selectors specificity, and reorder your styles rules:
http://www.w3.org/TR/css3-selectors/#specificity
And try to avoid !important like the Devil avoids the Cross.
Why is it that the links on this page (and all others but best to demo) sharing the link style accross all pages. To demo this click on Portfolio then go back, you will see the link text turns white, even though this should only be for the "message" element (blue with rounder corners) at the bottom of the page?
This is my CSS
.message {
background-color:#54a0d9;
border:1px solid #54a0d9;
color:#fff;
}
.message h2 {
font-size:22px;
color:#fff;
}
.message a:link, a:visited, a:hover, a:active {
color:#fff; }
and HTML is a normal link inside an element (which is not a child of the message element.
Surely that should only apply to the Message elements?
I've done some research on whats causing this but so far nout...
Separating selectors by commas means to consider them completely separately. So here:
.message a:link, a:visited
Means to apply this style to a:links inside of elements with a class of "message", and also to a:visiteds. Note that the latter does not have to be inside of an element of class message. Simply put .message in front of each comma-separated term to fix it.
Here's a screenshot of the problem:
Notice that we're on the stalk page. The CSS I wrote is supposed to change the color of the active page. Here is the CSS:
#nav {
border-top:10px solid #A7C1D1;
height:45px;
padding-left:100px;
padding-top:20px;
margin-left:0;
color:#000;
}
#nav a {
color:#000;
text-decoration:none;
}
#nav a:visited {
color:#000;
}
#nav a:hover {
color:#93AFBF;
}
#nav .active {
color:#93AFBF;
}
Before, I had the CSS for #nav .active to create a border around the active page. This worked and I could see the border around the word "stalk" when I was on the /stalk page. But this time around, I decided to just change the color of the word. This is where I ran into the issue.
Here is the HTML rendered for the page:
<div id="nav">
home · stalk · link3 · link4
</div>
If I take away the CSS for #nav a:visited then the CSS for #nav .active works, but now the visited links are blue when I want them to stay black.
Use
#nav a.active {
color:#93AFBF;
}
The #nav a:visited has higher specificity w3 specs than #nav .active and thus gets applied.
Try
#nav a.active
{
color: #93afbf
}
That should do it.
try:
#nav a:link {color: #000;}
#nav a:visited {color: #000;}
#nav a:hover {color: #93afbf;}
#nav a:active {color: #93afbf;}
You are confusing the active pseudo class
Site Point Refrence
This pseudo-class matches any element that’s in the process of being activated. It would apply, for instance, for the duration of a mouse-click on a link, from the point at which the mouse button’s pressed down until the point at which it’s released again. The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.
Similar Problem
Border property is not inherited while color property it is. So you inherit the color property for your link from the #nav, while the border property was the one declared in the "active" class rules. You should declare the color property for the link with the "active" class as suggested by Gaby
Tonight I found an unusual one. (A link color that I couldn't change.) I went into the inspector and first found the text-decoration-color property set. But no, that would be too easy. I scroll down to color and find this :not selector, which a theme author created. In my specific case, the solution was to duplicate (overwrite) this weird selector with the color I wanted:
#the-post .entry-content a:not(.shortc-button) {
color: white !important;
}
My suggestion is to go into your inspector (F12) and find the "Computed" tab and look where the colors are coming from. Usually it's straightforward where the color is coming from, and the inspector will even tell you which file and which line number set the color. Then the decision is, do you have access/permission to that file? Or maybe you have access, but do you necessarily want access to that file?
If you want to avoid changing the source of the color, for whatever reason, you can just re-declare the color again further down the page, like in your footer, or immediately after the theme is loaded, whatever the case may be. Of course given the option, it's usually preferable to find the root of the problem and then you end up using less CSS code which loads faster and is easier to maintain.
Am using css for some site. I noticed that the a:active style definition in my css file does not work at all. I was told by someone that I have to put the definitions in this order
a:link {...}
a:visited {...}
a:hover {...}
a:active {...}
I have done so but it's still not working. Please could someone tell me why it is not working and a possible workaround. Thanks
Here is a working example:
http://jsfiddle.net/BMHUz/
Click and hold on the anchor tag and you will see it turn orange.
a:active just stay for the few milliseconds you are clicking the link.
May i ask what you expect to see? In case you want a link to be a different color if you are on that page, thats not what a:active is for
If you want a link to be a different style if you are on that page, then you need to use jquery or javascript to change the style of active link.
jquery
$('a[href="' + window.location.href + '"]').addClass('active');
CSS
a.active{
/* your CSS for active link */
}
Put !important to the property if it is already defined to the anchor.
a {
color: white;
}
a:active {
color: black !important;
}