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
Related
So what I am trying to achieve here is that, I do not want any hyperlink to be underlined and at the same time I want some elements to be strike through.
Both of them work fine individually, but I can not get to work both of them together.
Code:
a:link {
text-decoration: none
}
.deceased {
text-decoration: line-through;
}
So I would guess the issue is that of selector specifity. I believe the a:link selector is more specific so it takes precedence over the .deceased. I would say the easiest solution would be to change the specificity.
check here
http://www.htmldog.com/guides/css/intermediate/specificity/
and here
http://dorward.me.uk/www/underline/
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.
For the following CSS:
a:link {color: blue; text-decoration:underline;}
a:visited {color: red; text-decoration:none;}
a:hover {color: red; text-decoration:none;}
a:active {color: red; text-decoration:none;}
The visited state changes to a red font, but the underline does not go away. It seems to be over-written by the a:link definition for text-decoration.
Currently, the only way to ensure that the visited state has no underline is by giving all states no underline as well. It must be something new because in the past, this CSS worked. Is there any way to set the a:link to underline and the a:visited to not underline?
I believe browsers have implemented this as a security measure. Previously one could style visited links differently and people used this to find out which sites a visitor had visited. They simply listed thousands of popular URLs on a site (hidden most likely) and checked with JS which ones were styled differently than others. This way the site owner could know which sites his visitors frequent.
You must do same text-decoration of all links...
Alternative text-decoration doesnot work
Here is demo : http://phihag.de/2011/so/visited.html
Good Luck !
writing somewhat of a css hack, styling for :hover {} works interestingly, but browsers treat a:hover differently for full links VS hash tags.
from http://inqdrops.com/welcom/
a, a:active, a:visited { color: #765; text-decoration: none;}
:hover { color: #ff5e99; text-decoration:overline; background: #222}
for this code, hovers on <a href='http://what.eva/'></a> and <a href='#whateva'></a> behave differently. They also differ for webkit and gecko.
Can someone explain what is happening?
--
EDITED FOR EXPLANATION ON SOLUTION
the answer by #babtek pointed me in the right direction, and the solution was to expand the css rule to :hover, :visited:hover {...}
I think a:visited ends up being more specific than :hover since it has a tagname as well... your "#" links might not get flagged as visited?
WHy don;t you change the css to
a:hover
in case someone is intersted, what i was missing was the css rules' order. plus a psuedo:psuedo rule
a, a:active, a:visited {color: #765; text-decoration: none;}
:hover, :visited:hover { color: #ff5e99; text-decoration:overline; background: #222}
thanks fo the tips
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.