0 Shares

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="//website.com/exact/path">Exact path</a>

[href="//website.com/exact/path"]{
  pointer-events: none;
}

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

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

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

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

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

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

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

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>

[href$=".pdf"]{
  pointer-events: none;
}

Css can target any HTML attribute. Could be rel, target, data-customand so on…

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

[target=_blank]{
  pointer-events: none;
}

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*="my-website.com"]) {
    pointer-events: none;
}

Or disable links to pdf files of a specific website :

<a href="//website.com/path/to/file.jpg">Link to image</a>

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

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

0 Shares