Front-end education for the real world. Since 2018.





Contains CSS attribute selector

Andy Bell

Topic: CSS

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
css

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

Enjoyed this article? You can support us by leaving a tip via Open Collective


Newsletter