CSS [attribute$=value] Selector

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS attribute ends-with selector matching file extensions
Definition

Definition and Usage

The [attr$=value] selector matches elements whose attribute value ends with value (a suffix match).

A classic use is styling links by file type: a[href$=".pdf"]. Compare with ^= (starts with) and *= (contains anywhere).

Standard-track.

Part of CSS attribute selectors (Selectors Level 3/4). Baseline widely available. Not deprecated or experimental.

Case sensitivity note

Suffix matching is usually case-sensitive for href / data-*. Use [attr$="value" i] for ASCII case-insensitive matches (e.g. .PDF and .pdf).

Syntax

CSS Syntax

syntax.css
[attr$= value] { … }

Optional flags before ]: i (case-insensitive) or s (force case-sensitive). Quote the value if it has spaces or special characters.

Parts

Selector Parts

PartMeaningTry it
attrAttribute name (href, src, data-file, …)Try it
$=Ends-with (suffix) operatorTry it
valueRequired suffix, e.g. ".pdf" or ".org"Try it
i flagASCII case-insensitive suffix matchTry it
Approach

How to Use $=

Pick the attribute, choose a clear suffix, then style only the matches.

  1. Choose the attribute that holds the string (href, src, or a data-* value).
  2. Write [attr$="suffix"] with the exact ending you care about.
  3. Add styles for those matches (color, icon cue, weight).
  4. Use the i flag when casing may vary (.pdf vs .PDF).
GoalTypical selector
HTML page linksa[href$=".html"]
PDF downloadsa[href$=".pdf"]
.org domainsa[href$=".org"]
Ignore casea[href$=".pdf" i]
Try it

Live Preview

Pick a suffix. Matching links highlight with real [href$=…] rules.

Suffix

Only links whose href ends with the chosen suffix light up.

Result

Matching a[href$=".html"]

Code

CSS Examples

Each snippet focuses on $=. Use Try It Yourself for a live editor.

Example 1 — Style Links Ending in .html

Underline only page links whose href ends with .html.

CSS
<style>
  a[href$=".html"] {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: underline;
  }
</style>

<a href="about.html">About</a>
<a href="https://example.com/blog">Blog</a>
Try It Yourself

How It Works

  1. Target the attribute. Use href on anchors.
  2. Require the suffix. $=".html" matches only values that end that way.
  3. Style matches. About is underlined; the blog URL is not.
  4. Exact end. page.html?x=1 would not match because it does not end with .html.

Example 2 — Highlight PDF Downloads

Make PDF links stand out from normal pages.

CSS
<style>
  a[href$=".pdf"] {
    color: #b91c1c;
    font-weight: 600;
  }
</style>

<a href="/files/guide.pdf">Guide (PDF)</a>
<a href="/html">HTML Tutorial</a>
Try It Yourself

How It Works

  1. Pick the extension. .pdf is the suffix to match.
  2. Write the selector. a[href$=".pdf"] targets those links only.
  3. Apply a cue. Red weight signals a downloadable file.
  4. Leave others alone. Paths without that ending keep default link styles.

Example 3 — Case-Insensitive Suffix with i

Match .pdf and .PDF with one rule (MDN-style i flag).

CSS
<style>
  a[href$=".pdf" i] {
    color: #b91c1c;
    font-weight: 600;
  }
</style>

<a href="/a.pdf">a.pdf</a>
<a href="/b.PDF">b.PDF</a>
<a href="/c.txt">c.txt</a>
Try It Yourself

How It Works

  1. Default is sensitive. Without i, .PDF would miss a $=".pdf" rule.
  2. Add the flag. Place i before the closing ].
  3. Both cases match. a.pdf and b.PDF share the style.
  4. Other endings skip. .txt still does not match.

Edge Cases & Pitfalls

If a suffix rule seems to miss, check these first.

query

Query strings break the suffix

file.pdf?dl=1 does not end with .pdf. Prefer clean URLs or match with *= carefully.

case

Watch letter case

$=".pdf" misses .PDF unless you add the i flag.

vs *

Do not confuse with *=

*= matches anywhere. Use $= when the ending must be exact.

quotes

Quote special values

Values with dots are fine in quotes: [href$=".html"]. Quote anything with spaces or odd characters.

chain

You can chain selectors

a[href^="https://"][href$=".org"] requires both a secure prefix and a .org suffix (MDN pattern).

Compatibility

Browser Support

[attr$=value] is a browser CSS selector. Node.js, Deno, and Bun do not evaluate it.

✓ Baseline · Widely available

[attr$=value]

Supported in Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 12+, Opera 10+, IE 7+. The i case flag needs Chrome 49+, Firefox 47+, Safari 9+, Edge 79+.

98% Global support
Google Chrome 4+
Full support
Mozilla Firefox 3.5+
Full support
Apple Safari 3.1+
Full support
Microsoft Edge 12+
Full support
Opera 10+
Full support
Samsung Internet 4+
Full support
Internet Explorer 7+
Full support
$= Universally supported

Bottom line: Safe for production. Prefer the i flag when file extensions may vary in case.

Remember

Key Takeaways

  • Role: $= matches an attribute value suffix.
  • Common use: style links by extension—a[href$=".pdf"].
  • vs ^= / *=: prefix vs anywhere vs suffix—pick the tightest match.
  • Pitfall: query strings and letter case can hide a suffix match.

One line: use [attr$="suffix"] when the ending of an attribute value is what matters.

Frequently Asked Questions

It matches elements whose attribute value ends with the given substring. The match must be at the very end of the value.
$= matches only a suffix. *= matches the substring anywhere inside the value.
$= matches the end of the value. ^= matches the start (prefix).
For attributes like href, class, id, and data-*, matching is case-sensitive by default. Add the i flag for ASCII case-insensitive matching: [href$=".pdf" i].
Styling links by file type, such as a[href$=".pdf"] or a[href$=".html"].
Widely available: Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 12+, IE 7+. The i case flag needs Chrome 49+, Firefox 47+, Safari 9+, Edge 79+. It is a browser CSS selector, not a Node.js API.

Next: [attribute=value]

Match elements when an attribute equals an exact value.

equals selector →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS [attribute*=value] Selector CSS [attribute=value] Selector