CSS: a:link vs just a (without the :link part) - css

So we're required to use the following order for CSS anchor pseudo-classes
a:link { color: red }
a:visited { color: blue }
a:hover { color: yellow }
a:active { color: lime }
But my question is why bother with the a:link part? Rather, is there any advantage to the above (other than perhaps clarity) over:
a { color:red; } /* notice no :link part */
a:visited { color: blue; }
etc.,etc.

:link selects unvisited links, that is: anchors with an href attribute which have not been visited by the browser (for whatever definition the browser vendor has for "visited").
If it has :link then it will never match <h1><a name="foo">A foo to be linked to</a></h1>
(Although you should be using <h1 id="foo">A foo to be linked to</h1> these days.)
Aside from that, it does make it clearer what it is for.
a { color: orange }
a:link { color: blue }
a:visited { color: indigo }
a:hover { color: green }
a:active { color: lime }
<a>my anchor without href</a>
<br><br>
my anchor without href
(They also have different levels of specificity)

Just "a" refers to ALL possible links (unvisited, visited, hovered, and active), whereas "a:link" just refers to normal unvisited links.
If you use "a" instead of "a:link", you are setting the default CSS for ALL links to whatever "a" is set to. In this specific case, since you specify each possible pseudoclass, it essentially doesn't matter whether you say "a:link" or just "a"
So in the first group, where you write out all the pseudoclasses (a:link, a:visited, etc), you are specifying the CSS for each possible case WITHIN "a"
a:link { color: red } //set unvisited links to red
a:visited { color: blue } //set visited links to blue
a:hover { color: yellow } //set hovered links to yellow
a:active { color: lime } //set active links to lime
In the second group, where you just write "a", you are actually setting the default CSS for all links to what you write in the first line, then redefining the CSS for the other pseudoclasses
a { color: red } //set ALL links to red!
a:visited { color: blue } //hm, never mind, let's set visited links to blue
a:hover { color: yellow } //hm, never mind, let's set hovered links to yellow
a:active { color: lime } //hm, never mind, let's set active links to lime

http://www.w3schools.com/css/css_pseudo_classes.asp
:link is when the link is unvisited. So when there is an anchor with a href attribute and the user have never been on the page behind the anchor.

Selector :link is a pseudo-element selector for hyperlinks, any element that is an hyperlink will be matched. The a selector will match "only" anchor elements.
Normally, every a element is also a hyperlink, and I'm not aware myself of any way to create an hyperlink in HTML without using an anchor, so you can probably use either of them in most cases.
However, using only a will match anchor elements that are not hyperlinks. For example, an anchor element written this way <a name=sign-up>Sign up form</a> will not match the hyperlink pseudo-element :link selector but will match the a selector.

Related

Link hover color won't change, but the link visited works?

So my links are the right color, my links turn the right color when visited, but my links aren't changing to the green they're supposed to when I hove over them?
.header p a{
color: white !important;
}
.header p a:visited{
color: #FF859C !important;
}
.header p a:hover {
color: #BCD955 !imporant;
}
You're getting a little overzealous with the !important modifier, and since :visited and :hover are equal specificity, :visited wins out because it was declared first.
Get rid of all the !important modifiers and it'll work as expected.

What is the CSS order for a field being hovered and focused

What color will my input be when it is focused AND hovered?
input:hover {
color: red;
}
input:focus {
color: blue;
}
These are presumably in the same stylesheet and they have the same specificity (one pseudo-class and one element), so the only remaining step in the cascade order is order specified. That is to say that if it is hovered and focused, it will be blue.
On Specificity: http://www.w3.org/TR/CSS2/cascade.html#specificity
input:hover {
color: red;
}
input:focus {
color: blue;
}
In the demo, because the input is focused and the CSS has :focus listed last, the input will be blue.
If you reverse those two rule sets, the input will be red, because :hover is last.
Try input:focus:hover
Normaly we just have 3 states, active, hover and focus. What you want wont be possible, but try the code above.

Why CSS selectors on links are tricky with underline with hover?

Here are two examples based on this HTML.
<a href="#">
<div class="foo">
hello
<span class="bar">world</span>
</div>
</a>
In the first one, I make the link not underline on hover, then make a sub-portion of the link underline, and that works fine:
a {
text-decoration:none;
}
a:hover {
text-decoration: none;
}
a:hover .bar {
text-decoration: underline;
}
http://jsfiddle.net/3qPyX/1/
In the second, I now reverse the selectors so that the second word should be un-underlined. However, now something strange happens. The entire link remains underlined even though the selectors seem like they should remove underline from the second word. <-- (this is the question. why does this happen?)
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
text-decoration: none;
}
http://jsfiddle.net/EAmwt/
Can someone explain what's going wrong in the second example? Inspecting with Chrome shows the span.bar has a computed style of text-decoration:none.
Update: a few answers explaining how to get around the problem, which is great except that's not really my question. What I want to know is why is this behavior different than, say, bold? For instance, if I try the 2nd example with bold, I get the expected results: http://jsfiddle.net/3qPyX/4/
Explanation:
The problem is that some properties (like text-decoration) get drawn to the whole parent inline element, whereas others - like font styling (that get inherited) - get overriden by the children properties.
Just for illustration: simmilarly, if you set a background color to a parent element it will paint the background of the parent ... and you would have to set another color to a child to lay it over (default - transparent - will still show the parent style through), but if you set font-weight at a child it will apply to the text inside the child element and override the parent settings.
You can find more detailed stuff on the text-decoration property in the CSS Level 2 and Level 3 Specifications.
A simple solution
withot changing the markup, you could just display .bar as inline-block.
Like so:
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
display:inline-block;
}
And the inline-block breaks out of the inline/text styling of the parent anchor element =) And you can then style it independently:
DEMO
When you do the text-decoration it is applied to the entire line at once. So the a:hover .bar doesn't cause any effect, because the underline is not being applied in the .bar but on the a.
Here is the specification: http://www.w3.org/TR/CSS21/text.html#lining-striking-props
UPDATE! (As #Cam suggested) :
You need the add in separate elements the parts of your text: http://jsfiddle.net/3qPyX/5/
The CSS:
.foo, a:hover .bar, a {
text-decoration:none;
}
a:hover .foo {
text-decoration: underline;
}

Overriding :visited overrides :link :hover :active

please consider these styles:
a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
#special:link { color: pink }
And now this markup:
Normal link
Special link
I expect the "special" link to be pink while keeping the other colors. However, pink replaces the other colors.
Why is this happening? How could I fix it? Thank you.
Its aggravating...and order matters here:
a:hover{
color:green;
}
a:visited{
color:red;
}
This means that unvisited links will turn green when you hover over them, and visited links will stay red when you hover on them.
Switch:
a:visited{
color:red;
}
a:hover{
color:green;
}
This means that both visited links and unvisited links will turn green when you hover on them. I hate that the order of these properties changes the behavior; the hover style should take effect regardless.
a:link{
color:blue;
}
a.one:hover{
color:green;
}
a.one:visited{
color:red;
}
a.two:visited{
color:red;
}
a.two:hover{
color:green;
}
<a href=#ddd class=one>One (wont change color on hover when visited)</a> |
<a href=#ddd class=two>Two (always turns green on hover)</a>
I believe it has to do with CSS priority order.
Because #special is an ID, it dwarfs any element-level style applied. (This can be proven in Firefox Firebug/Chrome Inspector and how the inherited style sheets are all over-written by the ID's style).
Though, considering there is no "present style" applied for :active, :visited, etc. It would stand to reason these styles would still be un-affected. Yet, making the following change to your hover seems to kick it back in to gear:
a:hover { color: green !important; }
Why is this happening?
Styles for the :link pseudo-class apply to all links states, so it includes :hover, :visited and :active
This is what I have observed since I started using CSS years ago. I don't know if it's how it is supposed to work but it is how I have seen it working and expect it to work.
So when, you set a style for #special:link, that style also applies to #special:hover, #special:visited and #special:active
Note that the use of an ID does not change much here.
If you try it with the below CSS, you will have both links pink... even for :hover state
a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
a:link { color: pink }
How could I fix it?
You can use !important as suggested by Brad or set the various states styles for #special together with the regular links.
a:link { color: blue }
#special:link { color: pink }
a:visited, #special:visited { color: red }
a:hover, #special:hover { color: green }
a:active, #special:active { color: black }
Here is another quick way around:
You can use :not(:hover).
#special:link:not(:hover) { color: pink }
DEMO
No, it is not going to use the other colors because of its ID, in such case you should add the rest of actions and colors to the ID.
For example, the link that you have, the "special" one, when over will say.
Ok, I'm 'a' ... link ... and my ID is .. special, so, I will keep the special parameters.
That's why that's not going to change.
Hope this helps,

CSS styling links: why a:link, a:visited vs just a

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.

Resources