Standard CSS selectors do not support direct case-insensitive property matching, but can be implemented by combining multiple selectors or using the :is() pseudo-class. The article proposes three methods: 1. Explicit matching by listing all possible case forms such as [data-type="product"] and [data-type="Product"]; 2. Use the simplified syntax of the simplified syntax to improve readability, such as: is([data-type="product"], [data-type="Product"]); 3. For dynamic content, you can use JavaScript to add a unified class name and then define styles for this class in CSS, thereby obtaining higher flexibility and control. These solutions are applicable to different scenarios and can effectively solve the style application problems caused by inconsistent case of attribute values.

You can't directly perform a case-insensitive attribute match in standard CSS Selectors — at least not by default. But there's a workaround using the :is() pseudo-class (or :where() if you're managing specificity) along with multiple selectors.

Why Case-Insensitive Matching Matters

HTML attributes like data-* or even class are sometimes written inconsistently, especially when generated dynamically or coming from third-party systems. For example, you might see:

 <div data-type="Product"></div>
<div data-type="product"></div>

If your CSS only targets [data-type="product"] , it'll miss the one with the uppercase P.

Use Multiple Attribute Selectors Together

One straightforward way to simulate case-insensitive matching is by listing all possible variations explicitly:

 [data-type="product"],
[data-type="Product"],
[data-type="PRODUCT"] {
  /* styles here */
}

This works well when you know the limited set of cases you need to cover. It's simple and compatible with all modern browsers.

This approach isn't scalable if there are many possible combinations — but for small use cases, it's totally fine.

Leverage :is() for Cleaner Syntax

To make things more concise and readable, especially when targeting multiple values ??or cases, use the :is() pseudo-class:

 :is([data-type="product"], [data-type="Product"], [data-type="PRODUCT"]) {
  /* styles here */
}

It does exactly the same thing as the previous example but avoids repeating the same style block multiple times.

Consider JavaScript for Dynamic Needs

If your project involves dynamic content where attribute values ??vary unpredictably in case, and you need precision styling control, consider adding a class via JavaScript instead. Then target that class in CSS.

For example:

 document.querySelectorAll('[data-type]').forEach(el => {
  if (el.getAttribute('data-type').toLowerCase() === 'product') {
    el.classList.add('is-product');
  }
});

Then in CSS:

 .is-product {
  /* styles here */
}

This method gives you full control and flexibility but adds a bit of scripting overhead.

So while native CSS doesn't support true case-insensitive attribute selectors, combining basic selectors or using :is() gets you pretty close. And for more complex needs, a little JS goes a long way.

The above is the detailed content of How do you perform a case-insensitive attribute match with CSS Selectors?. For more information, please follow other related articles on the PHP Chinese website!