Contains CSS attribute selector

Categories

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;
}

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me