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'] |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Also you can check the attribute hasn't a specific value, with the negation pseudo-class selector
|
This comment has been minimized.
This comment has been minimized.
cool |
This comment has been minimized.
This comment has been minimized.
Thanks! |
This comment has been minimized.
This comment has been minimized.
It might be good to point out that /* 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. |
This comment has been minimized.
This comment has been minimized.
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
freaking amazing!😮