Combining CSS3 Not Selectors

Question

I am trying to select all links except those that are internal AND mailto links AND anchor links (#) So I want to combine selectors so they will exclude X, Y and Z. However I can not figure out how to join them.

a:not([href*="myurl"]) { }

This CSS finds all links that don't contain 'myurl' however it then finds mailto: and anchor (#) links as well and I would like to exclude this from the selector.

I have to use a not selector to find all URLs outside my site as there is no way to my knowledge to say 'all sites outside my own' without using a not. Is there a way I can make it like

a:not([href*="myurl OR # OR mailto"]) { }

The full code uses :hover and :after as well if that matters:

a:not([href*="myurl"]):hover:after { }

This needs to be done fully in CSS not jquery/javascript. And I can't add classes to the urls.

Is it at all possible? (Cross browser isn't that important. Chrome + Firefox would be good enough)

My current work around is to target the other links using not([href*="http:// "]) { } but this is not preferable because it means overwriting the changes again which doesn't always work because one might have been color: red and the other color: blue and I can't make them go back to the original colours (among other reasons)

Answer 1

You can exclude them simply by adding more :not() selectors:

a:not([href*="myurl"]):not([href*="#"]):not([href*="mailto"]) { }

For the :hover:after state, simply append it like so:

a:not([href*="myurl"]):not([href*="#"]):not([href*="mailto"]):hover:after { }

Also, since this is CSS3, I'd recommend that you denote :after as ::after using double colons instead, just to make it clear that you're chaining a pseudo-element after a series of pseudo-classes, but it's not absolutely required and whichever you use won't make a difference in terms of browsers:

a:not([href*="myurl"]):not([href*="#"]):not([href*="mailto"]):hover::after { }