CSS [attr$="..."] Ends-With Attribute Selector

The $= Operator

[attr$="value"] matches elements whose attribute value ends with the supplied substring. The match is case-sensitive unless you append the i flag.

File Extension Styling

The most popular use is decorating download links by file type:

a[href$=".pdf"]::after  { content: " 📄 PDF"; color: #c00; }
a[href$=".zip"]::after  { content: " 🗜 ZIP"; color: #888; }
a[href$=".csv"]::after  { content: " 📊 CSV"; color: #2a7; }
a[href$=".mp4"]::after  { content: " 🎬 Video"; color: #36c; }

Users immediately know what kind of file each link delivers, with no JavaScript and no inline icons.

Image Format Branching

Use it to load different background images per format support:

img[src$=".webp"] { background: #fff url(webp-badge.svg) bottom right no-repeat; }
img[src$=".svg"]  { background: transparent; }

Trailing-Identifier Patterns

Component frameworks sometimes append suffixes to IDs (-input, -label, -error). The ends-with selector targets the family:

[id$="-error"] {
  color: rgb(220, 38, 38);
  font-size: 0.85rem;
}

Combining With ^= for Bracketing

You can chain attribute selectors to require both a start and an end:

/* Asset URLs that point at the CDN AND end in a hash */
[src^="https://cdn.example.com"][src$=".min.js"] {
  /* matches versioned, hashed bundles */
}

Specificity

Like every attribute selector, [attr$="..."] carries class-level specificity: (0, 1, 0).

Watch Out for Query Strings

[href$=".pdf"] will not match /whitepaper.pdf?download=1 because the actual end of the string is =1. If your URLs may include query strings, use [href*=".pdf"] instead.