a:not(a:not([href])) selector

Question

I want that a certain action to be associated to the click event of the anchor tag whenever its href attribute:

• does not start with mailto: and
• does not end with # and
• is present with any value including empty

So I was trying this code:

<a href="example.com">example.com</a>
<a href="mailto:[email protected]">Someone</a>
<a href="thepage#">The Page</a>
<a>This does nothing</a>

<script type="text/javascript">
    $(document).on('click', 'a:not([href^="mailto\\:"], [href$="\\#"], [href])', myFunction);
</script>

And it didn't work. But to my dismay this works:

$(document).on('click', 'a:not([href^="mailto\\:"], [href$="\\#"], a:not([href]))', myFunction);

But I don't understand how. Notice the inner :not(). As I understand the [href] means there is no href attribute. Or is it the opposite?

Could someone lead me to the light?

Answer 1

[href] means there is an href attribute no matter which, if any, value it has.

As pimvdb correctly pointed out, you could use

a[href]:not([href^="mailto\\:"], [href$="\\#"])

Which means "all a elements with any href attribute, except those whose href attribute starts with mailto: or ends with #