The [attribute$=value] selector matches elements when an attribute value ends with a specific string. It is ideal for file extensions like .html, .pdf, and .webp.
Suffix match.
Suffix operator.
.html, .pdf.
URLs & paths.
End vs contains.
Combine states.
The [attribute$=value] selector in CSS is an attribute selector that targets elements whose specified attribute value ends with a given substring.
This is particularly useful for styling links to local pages, downloadable files, or images based on how their URLs or paths end — without adding extra classes to every element.
Write the attribute name in brackets, then $= and the suffix in quotes: a[href$=".html"]. The element matches only if the attribute value ends with .html exactly at the final characters.
$= means “ends with.” Use [attr^=value] when the match must be at the start, and [attr*=value] when it can appear anywhere.
The signature of the ends-with attribute selector is:
[attribute$="value"] {
/* CSS properties */
}a[href$=".html"] {
color: #2563eb;
font-weight: 600;
}
a[href$=".html"]:hover {
background-color: #e2e8f0;
}$= checks that the attribute value ends with the given string..pdf, not just pdf, for precise matching.img[src$=".webp"].a[href$=".html"]:hover.| Selector | Matches when |
|---|---|
[attr$="x"] | Value ends with x |
[attr^="x"] | Value starts with x |
[attr*="x"] | Value contains x anywhere |
[attr="x"] | Value is exactly x |
| Question | Answer |
|---|---|
| Operator | $= (ends with) |
| Match position | Suffix only — final characters of value |
| Case sensitive? | Yes |
| Common pattern | a[href$=".pdf"] |
| vs contains | *= matches anywhere in value |
| Browser support | All modern browsers |
a[href$=".html"] a[href$=".pdf"] img[src$=".webp"] a[href$=".css"].html differently from external URLs..pdf, .zip, or .docx links..png or .webp.-dark.css or .min.js.hreflang values ending in -US when structured consistently.Links ending in .html are underlined; the external blog link does not match:
Practice suffix matching with page links, downloads, images, and asset filenames.
Match file extensions and URL suffixes at the end of attribute values.
Style internal page links and add a hover background for feedback.
a[href$=".html"] {
color: #2563eb;
font-weight: 600;
}
a[href$=".html"]:hover {
background-color: #e2e8f0;
}about.html and contact.html end with .html. The external blog URL does not, so it keeps default styling.
Target links whose href ends with .pdf for a distinct download style.
a[href$=".pdf"] {
color: #dc2626;
font-weight: 600;
}$= is stricter than *=: a path like /pdf/guide would not match .pdf at the end, but guide.pdf would.
Use suffix matching for images and stylesheet filenames.
Style images whose src ends with .webp.
img[src$=".webp"] {
border: 3px solid #7c3aed;
border-radius: 8px;
padding: 4px;
}Only the WebP image path ends with .webp. The PNG file uses a different suffix and is not selected.
Compare styling for asset links ending in .css versus .js.
a[href$=".css"] {
background: #eff6ff;
color: #1d4ed8;
}
a[href$=".js"] {
background: #fef9c3;
color: #854d0e;
}Each rule targets a different file extension at the end of the href value, making asset types easy to distinguish in documentation or file lists.
page.html?v=2 does not end with .html; the suffix is 2..PDF and .pdf are different matches..html pages from external URLs for clarity.[attribute$=value] WorksThe browser gets the full string from the HTML attribute.
$= compares the end of the value to your quoted string.
Elements with a matching suffix receive the CSS rule.
Ideal for extensions and predictable URL endings.
The [attribute$=value] selector is supported in all modern browsers.
Chrome, Firefox, Safari, Edge, and Opera all support the $= operator.
Bottom line: Safe to use $= for file extensions and URL suffixes in modern projects.
The [attribute$=value] selector is a precise tool for matching attribute values that end with a specific string. It shines when styling file types, local pages, and predictable URL patterns.
Combine it with pseudo-classes like :hover, compare it with *= and ^=, and remember that query strings can change what the browser sees as the suffix.
.pdfa[href$=".html"] for local pages:hover for feedback$= over *= for exact suffixespage.html?v=1 ends with .html$= with *=$=Use these points when matching suffixes.
Suffix match.
OperatorExtensions.
PatternMedia files.
Uses.pdf ≠ .PDF
RuleAll browsers.
CompatOpen the HTML editor and experiment with a[href$=".html"] and other suffix attribute selectors.
5 people found this page helpful