How to Select Local Links Using CSS?

If you wish to only target a named anchor (or "hash link"), then you can do it using the attribute selector that begins with "#" like so:

a[href^="#"] { /* ... */ }

It will target links like the following:

<a href="#">foo</a>
<a href="#bar">bar</a>

If you wish to target links relative to the current URL, then you can target links that begin with "/", like so:

a[href^="/"] { /* ... */ }

This will target links like the following:

<a href="/foo.html">foo</a>
<a href="/foo/bar.html">bar</a>

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.