CODEWITHSUNDEEP
htmlcsscss-selectors
wellhairy
wellhairy

Reputation: 23

Css link targeting, should i use a or :link

i've recently been working with 3rd party code targeting a button class differently across :link and input. I'd like to rein in this section of css so i'm looking for what in most cases is considered best practice.

As it stands an input button is targeted like this

input.button {
 ...
}

And a link button is targeted using the :link pseudo class

.button:link:after{
content: "...";
}

instead of

a.button:after{
content: "...";
}

As far as i can think the :link pseudo class only refers to an <a> tag so is there any advantage of using .button:link over a.button?

Upvotes: 2

Views: 119

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

The :link selects an a element whose href property has not been visited.

If your a element has a href property which you have not visited before, .button:link will select the same element as a.button, however if it either has not been visited before or does not have a href property, .button:link will select nothing.

JSFiddle demo.

Further reading: W3's CSS Selector documentation.

As Ruirize mentioned in comments on this answer, the :link pseudo-class selector also selects visited links on Google Chrome. I've raised this as a bug on Chrome's bug tracker, which can be viewed here.

Upvotes: 4

Related Questions