RGB logo

RGB Studios.org

A web development company

March 27, 2024

A Simple Guide to CSS Regex

Justin Golden

node js
Photo credit @barkiple on Unsplash

What is Regex?

Regex, short for regular expression, is a sequence of characters that define a search pattern. It’s commonly used in programming and text processing to efficiently match and manipulate strings based on specific patterns or rules. It’s usually used in “real” programming languages to match certain strings.

What is CSS Regex?

CSS regex allows developers to target HTML elements based on patterns within their attribute values. By using regex selectors in CSS, developers can apply styles to elements that match specific patterns.

Why You Might be Required to Use CSS Regex

Some websites use dynamically generated css classes that contain a hash that changes every regeneration, for example footer-menu-6b809e where 6b809e may change. Under these circumstances, if you want to target a class that starts with “footer-menu-” then you would need CSS regex.

Why You Don’t Want to Use CSS Regex

There are many problems with using css regex. For example, if you check if a class starts with “footer-menu” then it will also match “footer-menu” itself as well as “footer-menu-paragraph-6b809e” etc. If you check if the class in general starts with “footer-menu” then it might work so long as class="footer-menu-6b809e bg-blue pad-lg" but once the class order changes and footer-menu-6b809e is no longer the first class, for example, class="new-class footer-menu-6b809e bg-blue pad-lg" or class="bg-blue footer-menu-6b809e pad-lg", then your code no longer works. The same is true for checking if the class ends with a value. If that class is no longer the last class, then your code breaks.

This is because you aren’t checking for individual classes, but rather checking the entire css class, including spaces and all.

Additionally, if you just check if it contains a string, such as “footer-menu-” when this may match other classes, inlcuding “footer-menu-text” or “wrapper-footer-menu” and if you add spaces to the front and/or back, then this means the selector wouldn’t work if it’s the first or last class listed.

You should only use these CSS class regex selectors if you have to, and remember, that changing classes and class order may break the code.

How to Use CSS Regex

Now that the warnings are out of the way, here are the selectors:

For example, you could use:

div[class*='footer-menu'] {

to select a class that contains “footer-menu”

div[class^='footer-menu'] {

to select a class that starts with “footer-menu”

div[class$='footer-menu'] {

to select a class that ends with “footer-menu”

Good Uses of CSS Regex

I spoke badly about using regex to select classes as if they are strings, as there are many pitfalls and it means your code is vulnerable to breaking from minor updates. However, there are other good usages of regex in CSS.

Here’s the full list of selectors:

Example creative usages:


CSS regex has some niche usages. It is most commonly used for avoiding hashes, but when doing this, it has plenty of pitfalls, so use carefully. It’s a good tool to know in case there isn’t another way to solve a problem.

More Blog Articles
  Share   Tweet   Pin   Share   Post   Post   Share   Email