CSS attribute selector does not work a href

Question

I need to use attribute selector in css to change link on different color and image, but it does not work.

I have this html:

Answer 1

The accepted answer (using a[href$='.pdf']) assumes that that a link to a pdf will always end with .pdf. That is not necessarily the case, as the link could have a query string or a hash fragment, for example with a UTM tracking code or a page number, in which case those links would not be matched. In fact depending on your application this could be the case for most links.

A PDF File
A PDF File

If you want to ensure your rule is also applied in those cases you could match .pdf anywhere in the attribute using

a[href*='.pdf']

However this will then match some unlikely but unintended things, such as a subdomain our.pdf.domain.com/a-page. But we can narrow it down further, as we know we would only use it match pdfs that have a query string or hash fragment. If we combine the 3 cases we should match all pdf links.

a[href$='.pdf'], a[href*='.pdf?'], a[href*='.pdf#'] {
    background: red;
}