CSS Fuzzy Selectors Aren’t That Fuzzy

Front-End

File this under things I wish I had known earlier: CSS Fuzzy Selectors just aren’t that fuzzy.

For example, let’s assume you have a bunch of links that include “brand” in the href attribute:

<a href="https://yoursite.com/your-brand-1">Example 1</a>
<a href="https://yoursite.com/your-brand-2">Example 2</a>
<a href="https://yoursite.com/your-brand-3">Example 3</a>
<a href="https://partnersite.com/partnerBrand-1">Example 4</a>
<a href="https://partnersite.com/partnerBrand-2">Example 5</a>

Let’s say you wanted to select all links that had “brand” in the href attribute and make them red.

Ideally, you should just be able to write:

a[href*="brand"] {
    color: red;
}

This will work for the first 3 examples, but won’t work for examples 4 or 5.

Unfortunately, while CSS selectors are technically case insensitive, HTML is case sensitive, so you’ll need to write:

a[href*="brand"],
a[href*="Brand"] {
    color: red;
}

For more on HTML/CSS case sensitivity weirdness, check out this Stack Overflow post.