--- 
canonical: 'https://mwop.net/blog/2025-04-21-css-attribute-wildcard.html'
title: 'Matching Attribute Values in CSS Selectors'
author: "[Matthew Weier O'Phinney](https://mwop.net)"
created: '2025-04-21T11:00:18-05:00'
updated: '2025-04-21T11:00:18-05:00'
tags:
  - css
  - til

---
I had a situation where I was doing some web scraping, and the site, while it had a predictable structure, had some unpredictable class names for the elements I was searching for.

In all cases, there was a class that began something like "ItemOfInterest_image_item__", but where the suffix would vary such that I couldn't depend on it matching from request to request.

So, today I learned that you can match an attribute value in a variety of ways:

```css
// Match at the start of the attribute declaration
div[class^=ItemOfInterest_image_item__] img {}
// Match at the end of the attribute declaration
div[class$=ItemOfInterest_image_item__] img {}
// Match anywhere in the attribute declaration
div[class*=ItemOfInterest_image_item__] img {}
```

In my case, the specific class name could appear anywhere in the string, so I used the `*` selector.