Skip to main content

Always style links with a pseudo-class

Posted in CSS and Development

I remember I used to wonder why we have the :link pseudo-class in CSS; why not just use the a element selector? Aren’t they doing the same thing? Turns out they’re not.

<a> elements without an href don’t have any semantic value and, by default, browsers:

  • match their styling to their surrounding text
  • don’t include them in the page’s tab index
  • prevent them being clickable/actionable

If we were to style an href-less <a> element, we’d be telling our visitors that the <a> element was in some way different from the text it’s within. It wouldn’t be.

MDN Docs describes the :link pseudo-class like this:

The :link CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited <a> … element that has an href attribute.

So if we want to change default link styling we should be targeting :link in our CSS, not a.

Don’t do this:

a {
/* Link styles go here */
}

Do do this:

:link {
/* Link styles go here */
}

Subscribe

I send a newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. XHTML syntax is still worth using

    A few weeks ago I read an article on CSS-Tricks about writing HTML the HTML way, not the XHTML way, and it has been bothering me a bit.

  2. Booleans in ARIA

    HTML booleans are bit quirky but, as if just to complicate things, booleans in ARIA work slightly differently. It’s worth knowing how and why.