The substring attribute selector [attr*=value] matches when the attribute value contains that string anywhere inside it.
Example: a[href*="example"] matches links whose href includes example (such as http://example.com or https://cdn.example.org/x).
*= can match inside a longer token. For a space-separated word match, use ~=.
i flagDefault matching for attributes like href is case-sensitive. Add i for ASCII case-insensitive compares: [href*="pdf" i].
[attr*=value] { … }Optional flags: [attr*=value i] or [attr*=value s]. Quote values that need them.
*=Pick the attribute, then the substring you want to find inside its value.
href, data-*, …).[attr*="substring"] (or with an element type).i if case should not matter.^= / $= when you only care about start or end.| Piece | Required? | Role |
|---|---|---|
| Attribute name | Yes | Which attribute to inspect |
*= | Yes | Requires a substring match |
| Substring value | Yes | Text that must appear inside the value |
i / s | No | Case-insensitive or case-sensitive flag |
Links whose href contains example get a silver background via a[href*="example"].
Each snippet focuses on *=. Use Try It Yourself for a live editor.
Highlight every link whose URL includes example.
a[href*="example"] {
background-color: silver;
}a element.[href*=…] reads the URL string.example may appear anywhere in the value.Style anchors whose href contains .pdf.
a[href*=".pdf"] {
color: #b45309;
font-weight: bold;
}.pdf marks document URLs.*=. Match wherever that fragment appears in href.pdf-tips.html would also match—tighten with $= if needed.Ignore capitalization with the i flag.
a[href*="example" i] {
color: teal;
}i. Place it before the closing ].Example, EXAMPLE, and example all qualify.s rare. The case-sensitive flag has narrower support; default is often enough.*= is powerful—and easy to over-match.
[href*="a"] hits almost every URL. Prefer a distinctive fragment.
[class*="btn"] also matches btnLarge. For whole tokens, use .btn or ~=.
.PDF does not match [href*=".pdf"] unless you add i.
Values with spaces or special characters must be quoted: [title*="hello world"].
*= is a browser CSS attribute selector. Node.js, Deno, and Bun do not evaluate it.
Substring attribute matching is Baseline Widely available. The i flag is widely supported; the s flag is more limited.
Bottom line: Production-ready. Prefer distinctive substrings, and use ^= / $= when position matters.
[attr*="text"] (optional element type and i).= exact, ~= word, ^=/$= ends.One line: [attr*="x"] means “the value includes x somewhere.”
Learn how to match attribute values that end with a given suffix.
8 people found this page helpful