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 */
}

Accessibility in your inbox

I send an accessibility-centric 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. Getting started with NVDA

    Everyone who works in digital product development should be familiar with screen reader software. Here’s how to get started with NVDA on Windows.

  2. An enhancement to accessible responsive tables

    I’ve written about accessible responsive tables before but something has been bugging me. So here’s another step to make those tables even better.