Partial Attribute Selectors

Earlier in the week we looked at selecting tags based on attribute existence or attribute value matching. CSS3 introduced a number of selectors for working with partial attribute value matches. We'll examine each one.

Attribute Value Subset Matching

We can use the *= operator to match elements that have a specific substring in their attribute value:
div[class*="section"]
This would pull all elements that have a class that has a name containing the word section.

Attribute Value Starts With

We can use the ^= operator to match elements that have an attribute that starts with a certain character string:
a[href^="https:"]
This will match all elements that are secure links (that use https protocol).

Attribute Value Ends With

We can use the $= operator to match elements that have an attribute that ends with a certain character string:
img[src$=".gif"]
This will match all image tags that point to GIF files.