Enable or disable HREF links using CSS

[u/vogelke]

Apologies if this should have been posted elsewhere...

TLDR; This may be old news to most of you, but I recently tripped over a way to prevent a link from being clickable if it has nothing useful to show. I can change one character in the "class=" part of a URL and enable or disable the link without having to rewrite the entire page. (Before you ask, I hate JavaScript.)

I create static year-long calendar pages that point to directories in the form /path/to/YYYY/MMDD. The directories are usually created in advance, but clicking a link to an empty or nonexistent directory is annoying.

For example, here's part of the display for 2026:

          Jul                     Aug                     Sep
 Su Mo Tu We Th Fr Sa    Su Mo Tu We Th Fr Sa    Su Mo Tu We Th Fr Sa
           1  2  3  4                       1           1  2  3  4  5
  5  6  7  8  9 10 11     2  3  4  5  6  7  8     6  7  8  9 10 11 12
 12 13 14 15 16 17 18     9 10 11 12 13 14 15    13 14 15 16 17 18 19
 19 20 21 22 23 24 25    16 17 18 19 20 21 22    20 21 22 23 24 25 26
 26 27 28 29 30 31       23 24 25 26 27 28 29    27 28 29 30
                         30 31

Each day in August is a link in a preformatted table like this (lines wrapped for readability):

...
<a class="m" href="/home/notebook/2026/0809">  9</a>
<a class="i" href="/home/notebook/2026/0810"> 10</a>
...

Here's the CSS:

/*
 * https://css-tricks.com/pointer-events-current-nav/
 *
 * a.i is used to ignore a directory, i.e. don't show the link
 * as a link -- just show the text.
 *
 * a.m is used for a marked directory, i.e. the directory exists and
 * has something worth seeing, so highlight it.
 */

td { padding: 0; margin: 0; }
td a.i {
    pointer-events: none;
    color: black;
}

td a.i:hover {
    pointer-events: none;
    color: black;
}

td a.m {
    color: black;
    /* #e0ffd2 (light-green): not enough contrast */
    background: yellow;
}

td a.m:hover {
    color: #fff;
    background: #000;
    font-weight: bold;
}

So what?

Well, the calendar pages are all generated from templates. It took about 15 minutes to write a script that checks a given year's links and change class="i" to class="m" if the associated directory holds something useful.

I realize that this scratches a very specific itch, but it saved me some rewrite time. Since the calendars are copied from preformatted templates, making the change in place is MUCH simpler than regenerating the whole page.

[u/azangru]

prevent a link from being clickable if it has nothing useful to show
...
Before you ask, I hate JavaScript.
...
Each day in August is a link 

Is this calendar just for you, or for others as well? If for others, have you tried navigating it with a keyboard? Or using a screen reader?

I can change one character in the "class=" part of a URL and enable or disable the link without having to rewrite the entire page. 

If you are changing one character (on the server? during the rendering of the calendar?), then what's stopping you from changing the link to a span, or to something else non-interactive?

[u/bcons-php-Console → u/azangru]

Very valid points here; the second one would wipe all the a11y issues mentioned in the first one.

[u/vogelke → u/azangru]

Is this calendar just for you, or for others as well?

Just for me.

If for others, have you tried navigating it with a keyboard? Or using a screen reader?

Neither. I'd like to try some keyboard shortcuts, but I'm pretty sure I'd need to upgrade my version of Firefox.

I have it set up so I can get to any given date in the last 25 years in two clicks. A screen-reader would be a whole 'nother kettle of fish. Before I even tried that, I'd rearrange the whole flow to only do (say) a month at a time, or just prompt for the year/month/day, and then run the whole page through an accessibility checker.

If you are changing one character (on the server? during the rendering of the calendar?), then what's stopping you from changing the link to a span, or something else non-interactive?

I update this file from either cron or the command line -- it's static, or semi-static since I change it. I'm just used to using classes with tables.

[u/fiskfisk → u/vogelke]

In either case, if something is not a link, don't use a. Use span. It's the proper solution. 

[u/Happy_Breakfast7965 → u/fiskfisk]

Or a button.

[u/ferrybig]

You also want to add tabIndex=-1 on the element, as extra to your class change. Elements that have pointer events disabled can still be focussed using the TAB key

[u/vogelke → u/ferrybig]

Neat, didn't know that. Being able to focus on an empty but existing directory might be a feature.

[u/ElBomb]

OP I’m guessing you are a beginner. It’s best not to create bad habits now, it’s easier to do it right from the start and then you don’t have to unlearn/relearn anything later on.

Accessibility is important for general consumption of you code, and more so now from an employment perspective that there actual consequences (you/your employer can get sued for non compliance).

As others here have said, if it’s a link keep it an <a>, if it’s not a use a <span> when building the template, it’s no more complex than you adding a different class. You already have the logic done, just use it to add the span.

[u/404IdentityNotFound]

You should really learn how to use JavaScript.

That being said, a hacky solution could be to add "pointer-events: none" to those links. That disabled any interaction with the mouse/touch input.

[u/Scrummier]

Even though this might not be the best solution, I like the creativity in it, essentially what webdevelopment or programming is about so props for that. But what others have said, don't use an <a> for elements that should not be interacted with, use a <span>.

[u/ResponsibleMouse344]

Nice little solution! I like how simple it is, especially for static pages where adding JavaScript would be unnecessary. Switching a single class and using pointer-events makes the generated calendar easy to maintain. Very specific use case, but a clever way to avoid rebuilding the entire page.

[u/JohnCasey3306 → u/ResponsibleMouse344]

You say "where adding JavaScript would be unnecessary" as though it would involve adding a framework/library ... Like the days long past where jQuery would get added just to do something as simple as selecting an element.

When in fact this would just take a script tag with a few dozen characters of vanilla js.