How to disable link using CSS

Sometime need to disable a link using CSS. This can be done by using a small code of CSS.
Below i will show different Scenarios:

Disable link that has an exact href: =

You can choose to disable links that contain a specific href value like so :

<a href="//">Exact path</a>

  pointer-events: none;

Disable a link that contains a piece of path:*=

Here, any link containing /keyword/in path will be disabled

<a href="//">Contains in path</a>

  pointer-events: none;

Disable a link that begins with: ^=

the [attribute^=value] operator target an attribute that starts with a specific value. Allows you to discard websites & root paths.

<a href="//">Begins with path</a>

  pointer-events: none;

You can even use it to disable non-https links. For example :

  pointer-events: none;

Disable a link that ends with: $=

The [attribute$=value] operator target an attribute that ends with a specific value. It can be useful to discard file extensions.

<a href="/path/to/file.pdf">Link to pdf</a>

  pointer-events: none;

Or any other attribute

Css can target any HTML attribute. Could be reltargetdata-customand so on…

<a href="#" target="_blank">Blank link</a>

  pointer-events: none;

Combining attribute selectors

You can chain multiple rules. Let’s say that you want to disable every external link, but not those pointing to your website :

a[href*="//"]:not([href*=""]) {
    pointer-events: none;

Or disable links to pdf files of a specific website :

<a href="//">Link to image</a>

[href^="//"][href$=".jpg"] {
  color: red;

Browser support

Attributes selectors are supported since IE7. :not() selector since IE9.


2 thoughts on “How to disable link using CSS”

Leave a Comment

Your email address will not be published. Required fields are marked *