The [attribute$=value] selector targets elements whose attribute value ends with a specific string. It is part of the CSS attribute selector family and is especially useful when working with predictable value patterns, such as file extensions, suffix-based class names, or dynamically generated attributes. This selector allows you to apply styles without needing to know the full attribute value - only how it ends - making it ideal for flexible and scalable styling.

This selector works by scanning the entire value of an attribute and checking whether the final characters match the given value exactly. For example, selecting elements where a src attribute ends in .png allows you to style all PNG images regardless of their folder path or filename. Unlike the exact match selector ([attribute=value]), this one is tolerant of prefixes and only cares about the ending portion. This makes it especially powerful for handling file types, language codes, or naming conventions generated by scripts or CMS systems.

A common real-world use case is styling links that point to downloadable files. For instance, anchor elements whose href attribute ends with .pdf can be visually marked with an icon or color to indicate that they link to a document. This approach avoids adding extra classes in HTML and keeps your markup clean and semantic. When used together with properties such as content, background-image, or color, you can create clear visual cues without additional markup.

The [attribute$=value] selector is also useful when working with accessibility or localization patterns. For example, selecting elements whose lang attribute ends in a regional code (like -US or -GB) allows for subtle regional styling adjustments. When paired carefully with other selectors such as [attribute*=value] or [attribute^=value], you can build very precise selection logic while keeping your CSS readable and maintainable.

In practical examples, you might style all image elements whose src ends in .svg, or all links pointing to .zip files. You could also target form inputs where the name attribute ends with a specific suffix used by a backend system. Because this selector works purely at the CSS level, it avoids unnecessary JavaScript and improves performance and maintainability.