CSS attribute selectors

Attribute selectors let you target an element based on its attributes. You can specify the element’s attribute only, so all the elements that have that attribute — whatever the value — within the HTML will be targeted, or be more specific and target elements that have particular values on their attributes — and this is where attribute selectors show their power.

There are 6 different types of attribute selectors:

• [att=value]
  The attribute has to have the exact value specified.
• [att~=value]
  The attribute’s value needs to be a whitespace separated list of words (for example, class=”title featured home”), and one of the words is exactly the specified value.
• [att|=value]
  The attribute’s value is exactly “value” or starts with the word “value” and is immediately followed by “-”, so it would be “value-”.
• [att^=value]
  The attribute’s value starts with the specified value.
• [att$=value]
  The attribute’s value ends with the specified value.
• [att*=value]
  The attribute’s value contains the specified value.