Regex in CSS

Do you know Regex? That weird-looking string you often see in code for validating text inputs. Regex can be used in HTML with the pattern attribute, for example:

<input type="text" name="email" pattern="^[\w.-]+@[\w.-]+\.\w{2,}$" required>

Outside HTML, Regex is most commonly used in programming languages where it's more powerful and flexible. For example, in JavaScript:

const regex = /^[A-Z]{2}\d{4}$/;
const test = "AB1234";
console.log(regex.test(test)); // true

And in PHP:

$pattern = "/^[a-z0-9_]{3,16}$/";
$username = "user_123";
if (preg_match($pattern, $username)) {
  echo "Valid username";
}

But here's a question: did you know Regex can also be applied in CSS?
If you didn't, where do you think Regex-like behavior appears in CSS? Is it used for validation like in HTML and programming languages?

The answer is: there is no Regex engine in CSS.
However, CSS offers Attribute selectors that adopt a subset of regex-like operators. Attribute selectors support these operators: *, $, ~, |, and ^. They behave similarly to certain regex patterns, but strictly for selecting elements based on attribute values.

---

Understanding Attribute Selectors

Attribute selectors target HTML attributes and are written inside square brackets. Examples:

/* select all elements that have the x-data attribute */
[x-cloak] {
  display: none !important;
}

/* select all <a> elements that have an href attribute */
a[href] {
  color: blue;
}

---

Types of Attribute Selectors

Existence Selector → [attr]

Selects elements that have the attribute, regardless of its value.

/* all <img> elements that have an alt attribute */
img[alt] {
  border: 2px solid green;
}

2. Exact Match → [attr="value"]

Selects elements whose attribute value matches exactly.

/* all <input> elements with type="text" */
input[type="text"] {
  background: #eee;
}

3. Prefix Match → [attr^="value"]

Selects elements where the attribute value starts with the given string.

/* all <a> elements with href starting with https */
a[href^="https"] {
  color: green;
}

4. Suffix Match → [attr$="value"]

Selects elements where the attribute value ends with the given string.

/* all <a> elements with href ending in .pdf */
a[href$=".pdf"] {
  color: red;
}

5. Substring Match → [attr*="value"]

Selects elements where the attribute value contains the substring.

/* all elements with a class name that contains "btn" */
[class*="btn"] {
  background: pink;
}

Example elements that match:

<button class="btn">Click me!</button>
<button class="btn-primary">Click me!</button>
<button class="sm-btn">Click me!</button>
<button class="ghost-btn-danger">Click me!</button>

6. Word Match → [attr~="value"]

Selects elements where the attribute value contains the word (space-separated).

/* all elements whose class attribute contains the word "btn" */
[class~="btn"] {
  padding: 8px;
}

Example:

<button class="btn">Click me!</button>
<button class="btn primary">Click me!</button>

7. Dash Match → [attr|="value"]

Selects elements where the attribute value is exactly the given value, or starts with it followed by a dash.

/* matches lang="en" or lang="en-US", etc. */
[lang|="en"] {
  font-style: italic;
}

Example:

<button lang="en">click me!</button>
<button lang="en-US">click me!</button>

---

Closing thoughts

I hope this post helps level up your CSS skills as a frontend developer.

If you enjoyed this article, don’t forget to 💖 save, 🗨️ comment, and 🔁 share it with fellow developers!

See you in the next post 👋