The CSS attribute selector (^=, $=, \*) can be used to locate elements based on part of the attribute value. 1. ^=Match the attribute value starting with a specific string, such as a[href^="https://"], select a link starting with "https://"; 2. $=Match the attribute value ending with a[href$=".pdf"], select a link ending with ".pdf"; 3. \*=Match the attribute value containing a specific substring, such as img[src*="logo"], select an image containing "logo" in src; 4. Multiple selectors can be used in combination to improve accuracy, such as img[src^="user-"][src$=".jpg"], select an image starting with "user-" and ending with ".jpg". Note: These selectors are case sensitive, strictly matched, and may affect performance.

If you're working with CSS or jQuery and need to target elements based on part of an attribute value, attribute selectors like ^= , $= , and *= are super handy. These let you match values ??that start with, end with, or contain a certain string — no need for an exact match.

Selecting attributes that start with a value ( ^= )

This is useful when you want to target elements whose attribute values ??begin a certain way. For example, if you have links that start with "https://", you can select them like this:

 a[href^="https://"]

This will match any anchor tag where the href starts exactly with "https://".
You might use this to style external links differently, maybe adding an icon next to them.

Some things to keep in mind:

• It's case-sensitive in most contexts (unless you're using HTML5 with some frameworks).
• The match has to be at the very beginning — so http://example.com won't match https://example.com .

Selecting attributes that end with a value ( $= )

Want to find all links that point to PDF files? This selector makes it easy:

 a[href$=".pdf"]

That line targets all anchor tags where the href ends with .pdf . You could also use it to style download links or add a specific cursor or icon.

A few gotchas:

• Make sure the ending is correct — even a question mark or extra character at the end will break the match.
• Like ^= , this is strict — it must be at the end.

This works great for file types, query strings, or URL endings. Just be careful if URLs are dynamically generated — sometimes parameters or tracking codes come after your expected ending.

Selecting attributes that contain a value ( *= )

This one is more flexible. If you want to match any element where the attribute contains a substring anywhere in the value:

 img[src*="logo"]

That would match any image whose src includes the word "logo" — like /images/logo.png or /assets/company-logo.jpg .

It's powerful but can be too broad:

• It matches anywhere in the value, not just whole words.
• So something like "logos" or "blog-post" would still match "logo" .

Use it when you want flexibility but double-check that it doesn't accidentally catch more than intended.

Bonus: Combining them for better precision

Sometimes one selector isn't enough. Let's say you want to target image files that start with "user-" and end with ".jpg":

 img[src^="user-"][src$=".jpg"]

By chaining attribute selectors together, you can get much more precision without relying on JavaScript.

Another real-world example might be selecting form inputs with names that follow a pattern, like checkboxes used for filtering:

 input[name*="[filter]"]

This helps when styling or scripting behavior for groups of similar elements.

These attribute selectors are pretty straightforward once you know what each does. They're especially useful in dynamic environments where class names or IDs aren't predictable. Just remember to test how exactly your matches need to be — and don't overdo it, since overly complex selectors can slow things down a bit.

Basically that's it.

The above is the detailed content of How can you use attribute selectors to match parts of a value (e.g., ^=, $=, *=)?. For more information, please follow other related articles on the PHP Chinese website!