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. The accessibility conversations you want to be having

    In most companies, accessibility conversations centre around WCAG compliance, but that’s just the start. Thinking beyond that is where you want to be!

  2. Screen reader users and the tab key

    People who use a screen reader on a laptop/desktop generally use the keyboard, but that doesn’t mean they use it like a keyboard-only user.