In the CSS attribute selector, the difference between ^=, $= and \*= is that the matching attribute values ??are different. ^[attr^="value"] matches attributes that start with a specified value, such as a[href^="https"] selects all links that start with "https"; ^[attr$="value"] matches attributes that end with a specified value, such as a[href$=".pdf"] selects all links that end with ".pdf"; ^[attr="value"] matches elements that contain the specified substring in the attribute value, such as img[src="cat"] selects src with "cat", regardless of the location. The three are used to accurately locate the beginning, end or any position of the attribute value.

If you've ever looked at CSS attribute selectors and wondered what the difference is between ^= , $= , and *= , you're not alone. These symbols might look similar at first glance, but they actually do very different things when matching elements based on attribute values.

[attr^="value"] – Starts With

This selector matches elements where the specified attribute starts with the given value.

For example:

 a[href^="https"]

This would target all anchor tags whose href starts with "https" , which is handy if you want to style secure links differently — like adding a lock icon or changing the color.

? A common use case:

• Highlight external links
• Target specific file types (eg, [src^="img/logo"] )

Just remember, it's about the beginning of the string — not the whole thing.

[attr$="value"] – Ends With

This one does the opposite of ^= — it matches attributes that end with a certain value.

Example:

 a[href$=".pdf"]

This targets any link that ends in .pdf . It's super useful for applying styles to downloadable files — maybe you want to add a small PDF icon next to those links.

?? One thing to watch out for:

• It must match the exact ending
• So file.pdf?version=1 wouldn't match [href$=".pdf"]

It's great for filtering by file extensions or specific endings without needing extra classes.

[attr*="value"] – Contains

This selector is more flexible — it matches elements where the attribute contains the value anywhere within it.

Say you have:

 img[src*="cat"]

This would match any image tag where the src includes "cat", like cat.jpg , kitten-cat.png , or even category.jpg .

? But be careful — this can be too broad.

• It matches any occurrence of the substring
• Not just full words or exact patterns

It's useful when you want to apply styles to a group of related items without having to list them all.

So yeah, the main differences come down to where in the string the match occurs:

• ^= checks the beginning
• $= checks the end
• *= looks anywhere inside

They're subtle but powerful tools once you know how each behaves.

The above is the detailed content of What is the difference between ^=, $=, and *= in attribute CSS Selectors?. For more information, please follow other related articles on the PHP Chinese website!