How can I select links that lead to urls ending with "/foo-bar"?

I want to style some tags on SE with custom colors based on their tag, using CSS only.

This shouldn't be too hard, for:

<a href="/questions/tagged/foo-bar" class="post-tag" title="" rel="tag">foo-bar</a>

...should be easily matchable with a selector such as:

a.post-tag[href$=/foo-bar]

...where the slash would be required to match foo-bar but not baz-foo-bar.

However, it isn't that simple. Both the dash and the slash seem to prevent the selector from working. Luckily I can work around that by escaping characters, so / becomes \5c and - becomes \2d.

This doesn't seem to match anything either, however:

a.post-tag[href$=\5cfoo\2dbar]

...whereas a.post-tag[href$=foo\2dbar] does have some 开发者_Go百科matches, but again too many of them.

How can I select an href ending in "/foo-bar" using CSS?

Simply encase the value in the attribute selector in quotes so you don't need to escape anything, just like how you quote attribute values in HTML:

a.post-tag[href$="/foo-bar"]

jsFiddle preview