Tip: Select any link with CSS

Angelos Chalaris · 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.

Recommended snippets & collections

  • Tips & Tricks

    Snippet collection

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

  • Changes the styling of text selection.

  • Custom checkbox

    CSS, Visual

    Creates a styled checkbox with animation on state change.

  • Creates a styled radio button with animation on state change.