CSS3 Nonselector Combination

Question

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

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

This CSS finds all links that do not contain myurl, however it also finds mailto: and anchor (#) links, and I would like to exclude this from the selector.

I need to use a non selector to find all the URLs outside of my site, since I don’t know how to say “all sites are outside my site” without using no. Is there any way to do this like

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

The full code uses: hover and: after, if that matters:

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

This needs to be done entirely in CSS, not jquery / javascript. And I can not add classes to the URL.

Is it possible? (A cross browser is not that important. Chrome + Firefox will be good enough)

My current job is to target other links with not([href*="http:// "]) { } , but this is not preferable because it means rewriting the changes again, which does not always work, because that it could be color: red , and another color: blue and I can’t make them return to the original colors (among other reasons)

Answer 1

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

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

For state :hover:after just add it like this:

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

Also, since this is CSS3, I would recommend instead of :after denote ::after use double colons instead, just to make sure that you are hooking the pseudo-element after a series of pseudo-classes, but this is not entirely necessary depending on what you use, will not make any difference in terms of browsers:

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