Tip: Select any link with CSS

CSS, Visual, Interactivity · Mar 6, 2022

Styling links with CSS is considered straightforward, with most developers using the :link and :visited pseudo-classes. While this solution is very common, there's a less verbose alternative in the form of the :any-link pseudo-class. This pseudo-class selects all links, regardless of whether they have been visited or not. Thus, it acts as a catch-all for all links on the page.

:any-link {
  color: #0444f6;
}

One important note is that using :any-link is different to using the [href] attribute selector. The :any-link pseudo-class does not select empty links, whereas the [href] attribute selector does.

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • Tips & Tricks

    A collection of quick tips and tricks to level up your coding skills one step at a time.

    Collection · 53 snippets

  • Focus Within

    Changes the appearance of a form if any of its children are focused.

    CSS, Visual · Dec 30, 2020

  • Style links with no text

    Displays the link URL for links with no text.

    CSS, Visual · Nov 11, 2022

  • Custom text selection

    Changes the styling of text selection.

    CSS, Visual · Dec 30, 2020