The [attribute*=value] selector is an attribute substring-matching selector that targets elements whose specified attribute contains the given value anywhere within it. Unlike exact-match selectors, this one is flexible and powerful, making it ideal when attribute values are long, dynamic, or partially predictable. It is commonly used with attributes such as class, href, src, data-*, and aria-*.

This selector works by scanning the entire attribute value and checking whether the provided string appears at least once, regardless of its position. For example, it will match whether the value appears at the beginning, middle, or end of the attribute. This makes it especially useful when working with utility-style class names, dynamically generated URLs, or metadata attributes that follow naming conventions.

A common real-world use case is styling links that point to a specific domain or file type. For example, selecting all links whose href contains "pdf" allows you to visually distinguish downloadable files. When used with elements such as a or input, this selector enables very targeted styling without needing additional classes or markup changes.

Compared to other attribute selectors, [attribute*=value] is more flexible than ~=, which only matches whole space-separated words, and more permissive than ^= or $=, which require the value to appear strictly at the beginning or end. Because of this flexibility, it’s powerful - but should be used thoughtfully, as overly broad matches can unintentionally affect multiple elements.

In practical styling, this selector is often paired with properties such as color, background-color, or text-decoration to visually differentiate matching elements. For example, links containing a certain keyword can be highlighted, or inputs with specific data attributes can be visually grouped for usability or debugging purposes.

Here is a simple example to illustrate how it behaves:

<a href="https://example.com/download/file.pdf">Download PDF</a>
<a href="https://example.com/blog/post">Read Blog</a>

a[href*="pdf"] {
  color: red;
  text-decoration: underline;
}

In this case, only the first link is affected because its href attribute contains the substring "pdf".

Overall, the [attribute*=value] selector is best suited for pattern-based styling where full control over attribute values isn’t possible or practical. When used carefully, it can significantly reduce the need for extra classes while keeping your HTML clean and semantic.