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 :

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

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

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.

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

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.

Or any other attribute

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

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 :

Or disable links to pdf files of a specific website :

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 *