We very often style our markup using attribute selectors such as class name or ID. However, CSS gives us a great deal more sophistication when it comes to using CSS attribute selectors.
To start with, we have a vanilla attribute selector,
[attr]which will match any element with matching attribute selector. If instead we wanted to select a tag with a particular attribute,
elem[attr]Easy enough. A more subtle point: It will probably be best to assume any attribute selector value i.e. attr=”value”, is case sensitive to avoid any nastiness.
Now the fun part! We can prepend the equals sign between the attribute name and attribute value to define the relationship between them.
[attr='value']Matches all elements with “attr” with value exactly equal to “value”
[attr~='value']Matches all elements with “attr” with value containing “value” within a space separated list e.g. rel="this is my value"
[attr|='value']Matches all elements with “attr” with value containing “value” within a dash separated list e.g. rel="this-is-my-value"
[attr^='value']Matches all elements with “attr”, with value starting with “value”
[attr$='value']Matches all elements with “attr”, with value ending with “value”
[attr*='value']Matches all elements with “attr”, with value contains at least one instance of “value”
You can go even further and combine the rules given above to create multiple attribute selectors.
Altogether, CSS attribute selectors provide more fine-grained control to style markup. For example, you can choose to style anchor tags that link to external pages differently - no need to needlessly suffer classitis.
All the best,
Tom