attributes.css

Seven different types of CSS attribute selectors

// This attribute exists on the element
[value]

// This attribute has a specific value of cool
[value='cool'] 

// This attribute value contains the word cool somewhere in it
[value*='cool'] 

// This attribute value contains the word cool in a space-separated list
[value~='cool'] 

// This attribute value starts with the word cool
[value^='cool'] 

// This attribute value starts with cool in a dash-separated list
[value|='cool'] 

// This attribute value ends with the word cool
[value$='cool'] 

freaking amazing! 😮

https://codepen.io/kri5/pen/MWYNPPV

Also you can check the attribute hasn't a specific value, with the negation pseudo-class selector

:not([value='cool'])

cool

Thanks!

It might be good to point out that [value~='cool'] would also match if the value is a single value, with no other space-separated values. So you could correct it to say:

/* This attribute value has a specific value of cool or contains the word cool in a space-separated list */
[value~='cool']

The same principle applies to the dash separated one:

/* This attribute value has a specific value of cool or starts with cool in a dash-separated list */
[value|='cool'] 

Maybe there's an easier way to say those, but that's the gist of it.

Oh and I just realized I had to edit my comment to fix the CSS comments. I make that mistake all the time too! CSS comments don't work with just // at the start of the line, unless we're using SCSS. 😃