CODEWITHSUNDEEP
htmlcsscss-selectorspseudo-class
user3546093
user3546093

Reputation:

A strangeness with a:link

My HTML :

<a href="http://google.fr">Google</a><br>
<a href="http://wikipedia.org">Wikipedia</a>

CSS :

a:link {
text-decoration: none
}

I would style only unvisited links (logically, a:link styles unvisited links), but even visited links lose underlining. Why?

Update : JSFiddle : http://jsfiddle.net/M8AyL/

Upvotes: 2

Views: 87

Answers (4)

user3546093
user3546093

Reputation:

As Hashem Qolami says in comments, MDN states the reason:

Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by :visited pseudo-class:

only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke.

Upvotes: 2

T J
T J

Reputation: 43166

The :link CSS pseudo-class lets you select links inside elements. This will select any link, even those already styled using selector with other link-related pseudo-classes like :hover, :active or :visited. In order to style only non-visited links, you need to put the :link rule before the other ones, as defined by the LVHA-order: :link — :visited — :hover — :active. The :focus pseudo-class is usually placed right before or right after :hover, depending of the expected effect.

Now will be a good time to quit learning from misleading sources like w3schools

Upvotes: 0

web-tiki
web-tiki

Reputation: 103810

I think you mean the :visited pseudo element because MDN for :link states :

The :link CSS pseudo-class lets you select links inside elements. This will select any link [...]

Upvotes: 1

Rhythem Aggarwal
Rhythem Aggarwal

Reputation: 356

I think this is because there is no other property set for a link. Hence all the visited links too are getting hit by a:link.

a:visited {
text-decoration: underline;
}

for the desired result.

Upvotes: 2

Related Questions