Contains CSS attribute selector


In CSS you can detect if an attribute contains a value. This is one of many attribute selectors.

You can use this to apply a default value, if say, a utility class that applies a background doesn’t exist, using :not.

Code language
/* If this doesn’t have a 'bg-' prefixed class, 
apply a default */
.my-element:not([class*='bg-']) {
  background: #efefef;


If you liked this post, you might like these ones, too

  1. Create a user controlled dark or light mode

    Automatic dark and light themes, based on system user-preferences, are handy but in this tutorial, we take that one step further and give our users control.

  2. Create a semantic breakout button to make an entire element clickable

  3. Use grayscale filter to see where you are relying too much on colour

    🔥 A handy quick tip.


Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.