Next-Gen App & Browser Testing Cloud

Trusted by 2 Mn+ QAs & Devs to accelerate their release cycles

How to Target a Link in CSS?

You target a link in CSS by selecting the anchor element and, optionally, one of its states. Use the type selector a for all links, the four link-state pseudo-classes :link, :visited, :hover, and :active to style interaction states, and class, ID, or attribute selectors like a.nav-link or a[href^="https"] to target specific links. The separate :target pseudo-class styles the element a URL fragment points to.

Understanding How Links Are Targeted in CSS

A link in HTML is the anchor element <a>. In CSS, the base selector a matches every anchor on the page. To be more precise, you layer on pseudo-classes that reflect a link's state or use class, ID, and attribute selectors to isolate a single link. Note that link pseudo-classes only apply to anchors that actually have an href attribute.

If you want a broader refresher, our guide to CSS selectors and the CSS selectors cheat sheet cover the full selector toolkit.

Targeting Link States with Pseudo-Classes

The four link-state pseudo-classes let you style a link differently as the user interacts with it. Declare them in the order :link, :visited, :hover, :active, easy to remember with the mnemonic LoVe HAte.

/* Unvisited link */
a:link {
  color: #0d6efd;
  text-decoration: none;
}

/* Visited link */
a:visited {
  color: #6f42c1;
}

/* On mouse hover */
a:hover {
  color: #0a58ca;
  text-decoration: underline;
}

/* While being clicked */
a:active {
  color: #dc3545;
}

Order matters because these selectors share the same specificity, so a later rule overrides an earlier one. Declaring :hover before :visited is the classic reason a hover color never appears.

Targeting a Specific Link with Class, ID, and Attribute Selectors

When you need to style one link rather than all of them, reach for a class, an ID, or an attribute selector. Attribute selectors are especially useful when you cannot edit the markup to add a class.

/* By class */
a.nav-link {
  font-weight: 600;
}

/* By ID (a single unique link) */
a#cta-signup {
  background: #0d6efd;
  color: #fff;
  padding: 8px 16px;
}

/* External links (href starts with https) */
a[href^="https"] {
  color: #198754;
}

/* PDF links (href ends with .pdf) */
a[href$=".pdf"]::after {
  content: " (PDF)";
}

/* Any link whose href contains 'blog' */
a[href*="blog"] {
  font-style: italic;
}

Using the :target Pseudo-Class

The :target pseudo-class is different from the link selectors: it does not style the link itself, but the element whose ID matches the current URL fragment. When a user clicks an in-page anchor such as #section2, the matching element becomes the target and can be highlighted.

/* Highlight the section the user jumped to */
:target {
  background-color: #fff3cd;
  scroll-margin-top: 80px;
}

This is ideal for highlighting the destination of table-of-contents links or deep-linked sections without any JavaScript.

Common Mistakes and Troubleshooting

Wrong pseudo-class order: Placing :hover or :active before :link and :visited makes them silently fail. Keep the LoVe HAte order.
Anchor without href: Link pseudo-classes ignore anchors that have no href, so <a> used as a placeholder will not respond to :link or :visited.
Expecting layout changes on :visited: Browsers restrict :visited to color-related properties for privacy, so size or spacing changes are ignored.
Confusing :target with :link: :target styles the fragment destination, not the clickable link, a frequent source of confusion.
Specificity conflicts: An ID selector beats a class, so a global a rule may be overridden by a more specific one. Check specificity before adding !important.

Conclusion

Targeting a link in CSS comes down to choosing the right selector: the base a for all links, the four state pseudo-classes for interaction, class, ID, and attribute selectors for specific links, and :target for fragment destinations. Keep the pseudo-class order correct, respect the privacy limits on :visited, and verify the result across real browsers to ensure your links look and behave exactly as intended.

Frequently Asked Questions

What is the correct order for link pseudo-classes in CSS?

Declare them as :link, :visited, :hover, :active, remembered by the mnemonic LoVe HAte. Because they share the same specificity, later rules override earlier ones, so an incorrect order can stop :hover or :active from displaying as expected.

What is the difference between :link and :target in CSS?

The :link pseudo-class targets any unvisited anchor with an href. The :target pseudo-class targets the single element whose ID matches the current URL fragment, so it styles the section a user jumped to rather than the link itself.

How do I target one specific link in CSS?

Give the anchor a class or ID and select it with a.myclass or a#mylink, or use an attribute selector such as a[href='/pricing']. Attribute selectors are handy when you cannot add a class to the markup you are styling.

Why is my a:hover style not working?

The most common cause is pseudo-class order. If :hover is declared before :link or :visited, those rules override it. Place :hover after :link and :visited, and make sure the anchor actually has an href attribute.

Can I style links based on their destination URL?

Yes. Attribute selectors like a[href^='https'] target external links, a[href$='.pdf'] target PDF links, and a[href*='blog'] match any href containing blog. This lets you add icons or colors based on where a link points.

Should I still use :visited for styling?

You can, but browsers restrict :visited to a small set of properties like color for privacy reasons. Layout-affecting properties are ignored, so keep visited styles limited to color changes to avoid confusing or inconsistent results.