What is RegEx?
Regular Expressions (RegEx) are a sequence of characters defining a search pattern. In essence, RegEx simplifies the process of identifying patterns within text, making it a go-to tool for developers. They are commonly associated with tasks like validating forms, searching strings, or performing substitutions in programming languages like JavaScript (JS).
And while the feature is most often associated with JS, CSS also has its own RegEx-like functionality! While not as extensive as JavaScript’s, CSS attribute selectors bring a powerful way to dynamically style elements based on patterns. This means you can use CSS to manage dynamic content, such as e-commerce product listings or blog posts, without needing JavaScript.
In this article, we’ll explore how CSS RegEx works, why it’s a game-changer for Webflow projects, and teach you to do it yourself to level up the scalability of your Webflow project.
What is CSS RegEx?
To better understand RegEx, it is important to know how CSS allows the user to style the elements at the top level:
- The element's HTML tag — one can style elements globally by using a tag such as
<form>for forms - The element's ID — one can style a single element within the page that is identified through the id such as
#form - The element's class — one can style all the elements that have the class identifier applied such as
.form - The element's attribute — one can style all the elements that have the attribute applied with the same value such as
[class='form']. This is exactly where the CSS regular expressions come into play.
While CSS doesn’t have traditional RegEx, it does provide attribute selectors that allow you to filter elements dynamically based on patterns. Close enough, right? So, here are the patterns that make the feature:
^=: Selects elements whose attribute value starts with a specific string.$=: Selects elements whose attribute value ends with a specific string.*=: Selects elements whose attribute value contains a specific string.
For example:
1div[class^='card'] {
2/* Matches classes starting with 'card' */
3 background-color: #f0f0f0;
4}These selectors are especially useful in managing large sets of items, such as e-commerce products or blog posts, without needing JS.
Being an uncommonly used feature, it is surprising that one can find a good explanation of CSS RegEx functionality, and yet, copying the solution from A to Z would lead to failure if brought into Webflow environment.
The Webflow's Challenge with CMS and Dynamic Content
Webflow’s CMS is a fantastic tool for managing dynamic content, but it has some limitations. To use CSS RegEx effectively, you need to:
- Add a collection list
- Add a custom div inside your collection item.
- Add the attribute
[class=""]to that div - Dynamically assign the value to that attribute deriving from the CMS
Since the custom element resides within the collection item div, you’ll often need to target the parent element of the custom div for styling purposes. This is where the :has selector becomes essential.
Using :has for Parent Selection
The :has selector lets you apply styles to a parent element based on its child’s attributes. This is particularly useful for Webflow’s dynamic content setup.
Example 1: Prioritizing Items
To move prioritized items to the top of the list:
1.col-item:has(div[class^='card'][class$='prioritize']) {
2 order: -1;
3}Example 2: Styling Out-of-Stock Products
To apply a grayscale filter to out-of-stock items:
1.col-item:has(div[class^='card'][class*='out']) {
2 filter: grayscale(1);
3 opacity: 0.5;
4 pointer-events: none;
5}The Caveat: Nesting :not Within :has
It’s important to note that you cannot nest :not within :has. For example, this is not valid CSS:
1.col-item:has(div[class^='card'][class$='prioritize']:not([class*='out'])){
2 order: -1;
3}Instead, you need to separate the conditions:
1.col-item:has(div[class^='card'][class$='prioritize']) {
2 order: -1;
3}
4.col-item:has(div[class^='card'][class*='out']) {
5 order: initial;
6}Step-by-Step Guide for Webflow Integration
- Create a Custom Element — Add a custom div inside your collection item and assign it the attribute
[class=""]dynamically from the CMS. - Write Your CSS — Use
:hasselectors to target the parent.col-itemdiv based on the custom element’s attributes. - Add Custom Code — Embed your CSS code in Webflow’s project settings or use a custom code block on the page.
- Test and Preview — Use Webflow’s preview feature to ensure your selectors are working as expected.
Not sure how to implement these steps? Let us handle the technical details for you. Explore our Webflow Development Services and see how we can bring your vision to life.
Practical Use Cases
Highlight New Products
Add a badge to products tagged as "new":
1div[class^='card'][class*='new'] {
2 background-image: url('new-badge.svg');
3}Style Best Sellers
Change the background color of top-selling products:
1div[class^='card'][class*='seller'] {
2 background-color: #DA9069;
3}Prioritize Featured Products
Bring featured items to the top of the list while ensuring out-of-stock items remain unprioritized:
1.col-item:has(div[class^='card'][class$='prioritize']) {
2 order: -1;
3}
4.col-item:has(div[class^='card'][class*='out']) {
5 order: initial;
6}Limitations and Best Practices
- Performance Considerations — While CSS RegEx is powerful, overusing complex selectors like
:hascan impact performance on larger lists. - Clear Class Naming — Use meaningful and consistent class names to simplify your CSS.
- Combine Features — Leverage Webflow’s native tools alongside custom code for the best results.
Conclusion
CSS RegEx unlocks powerful possibilities for dynamic styling in Webflow projects. By combining attribute selectors and the pseudeo classes such as :has, :is, among others, you can create more dynamic and flexible designs for e-commerce, blogs, team members, and beyond. While there are limitations, careful planning and implementation can make your Webflow projects far more efficient and effective.
Ready to elevate your Webflow game? Get your clonable of our CSS RegEx Implementation in Webflow!