CSS Attribute Selectors Cheat Sheet

css-attribute-selectors-cheat-sheet.css

/* Courtesy of MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors */
div[attr]         { /* "has attr" - element contains 'attr' attribute, value does not matter. */ }
div[attr=value]   { /* "exactly" - attr is exactly value. */ }
div[attr~=value]  { /* "contains" - attr is a whitespace-separated list of words, one of which is "value". */ }
div[attr|=value]  { /* "exactly or begins with `value-` - attr can be exactly "value", or it can _begin_ with "value" immediately followed by “-” (U+002D). */ }
div[attr^=value]  { /* "starts with" - attr's _first_ value is prefixed by "value". */ }
div[attr$=value]  { /* "ends with" - attr's _last_ value is suffixed by "value". */ }
div[attr*=value]  { /* "contains" - attr contains at least one occurrence of "value" as a substring. */ }
div[attr(~|^$*)=value i] { /* "case-insensitive <query>" - applies a case-insensitive search on the query (any of the above examples will work, just end the selector with 'i' */ }