CSS “RegEx” Attribute Selectors

Regex, or regular expressions, are not directly supported in CSS selectors… However, you can use attribute selectors to match patterns in attribute values, which can be a useful workaround for certain cases.

Photo by Pankaj Patel on Unsplash

Attribute selectors are a type of selector in CSS that allow you to select elements based on the presence, value, or substring of their attributes. For example the next two CSS selectors do the same thing. Selects all div elements that have the class “select-me”:

div[class="select-me"] {
  background: red;
}

div .select-me {
  background: red;
}

But the nice thing about attribute selectors is that they don’t stop here, there are multiple ways of selecting elements with them. For example, if you have a set of elements with class names like “item-1”, “item-2”, “item-3”, etc., you could select them all using an attribute selector like this:

[class^="item-"] {
  background: red;
}

And from here the idea of some kind of a regular expression, those selectors are very powerful. “^=” is looking for elements that have the class attribute with a string that has a value which starts with “item-” and selects all the elements found.

Now, what if you have a link element and you want all the links that contains the word “home” to be green and all the ones that have the word “office” blue? You can do something like this:

[href*="home"] {
  background: green;
}

[href*="office"] {
  background: green;
}

The “*=” selects based on a substring value for the element attribute. You can also use “$=” to select end of a value, in a link case it can be the “.com” or “.org” part. I think you get the idea on how to use them, so here is a list with more wildcards to simplify things:

• [attr=value] — selects exact value
• [attr~=value] — selects value containing a specific word in a space-separated list
• [attr|=value] — selects value starting with the specified string, followed by a hyphen or the end of the string
• [attr^=value] — selects value starting with the specified string
• [attr$=value] — selects value ending with the specified string
• [attr*=value] — selects value containing the specified string

All of those are great but what if you have an attribute without a string value? For example you have a button that is disabled until the user completes a form? Yes you can use the pseudo-class “:disabled” but, you can also try something like this:

button:disabled {
  background: #555;
  cursor: not-allowed;
}

button[disabled] {
  background: #555;
  cursor: not-allowed;
}

This was just an easy example, in the real world there isn’t a pseudo-class for every attribute an element might have. There may be attributes auto-generated on a page and you only need to come with some styling. Or the entire page can be auto-generated with a tool and you only need to create a new stylesheet for it and some elements are hard to select.

And just another thing about CSS attribute selectors? They are supported by most modern web browsers including Edge, Firefox or Safari. However, there may be some differences in how certain selectors are interpreted or implemented by different browsers, which can result in inconsistent behavior. I use them in Edge and Firefox and I can’t tell a difference in behavior.

Now, before I end this short story about what cool things you can do with these selectors, I just want to show a more complex example where they can help and reduce the amount of code we have to type. Imagine two dropdown menus, as simple as possible:

<div class="dropdown-1">
  <div>Hover Me</div>
  <div class="hidden-menu-1">
    Hidden Element 1
  </div>
</div>

<div class="dropdown-2">
  <div>Hover Me</div>
  <div class="hidden-menu-2">
    Hiddent Element 2
  </div>
</div>

To make them work all we have to do is to play a bit with display property of the “hidden-menu” and “dropdown”:

.hidden-menu-1, .hidden-menu-2 {
  display: none;
}

.dropdown-1:hover .hidden-menu-1, .dropdown-2:hover .hidden-menu-2{
  display: block;
}

And in the attribute selectors version we can only search by the words “dropdown” and “hidden-menu” and we will have somethings that looks like this:

[class^="hidden-menu"] {
  display: none;
}

[class^="dropdown"]:hover [class^="hidden-menu"] {
  display: block;
}

But also, here it would be much simpler to use only 2 clasess “dropdown” and “hidden-element”, and when the user hovers an individual one, only that one will open.

If you would like to go deeper in the rabbit hole of CSS attribute selectors you can start with the attribute selectors page from Mozilla Web Docs (MDN) or this page from World Wide Web Consortium (W3C) about selectors.