Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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']
@emkis

This comment has been minimized.

Copy link

emkis commented Jan 31, 2020

freaking amazing! 😮

@kjvdven

This comment has been minimized.

Copy link

kjvdven commented Feb 3, 2020

@miguel-ra

This comment has been minimized.

Copy link

miguel-ra commented Feb 3, 2020

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

:not([value='cool'])

@kvzivn

This comment has been minimized.

Copy link

kvzivn commented Feb 5, 2020

cool

@TomIrimescu

This comment has been minimized.

Copy link

TomIrimescu commented Feb 7, 2020

Thanks!

@impressivewebs

This comment has been minimized.

Copy link

impressivewebs commented Feb 9, 2020

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.

@impressivewebs

This comment has been minimized.

Copy link

impressivewebs commented Feb 9, 2020

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. 😃

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.