This content originally appeared on DEV Community and was authored by Eris Sulistina
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 👋
This content originally appeared on DEV Community and was authored by Eris Sulistina
Eris Sulistina | Sciencx (2025-10-02T03:17:49+00:00) Regex in CSS. Retrieved from https://www.scien.cx/2025/10/02/regex-in-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.