CSS3 adds complex attribute selectors that allow you to perform regular expression matches on attribute values. These types of selectors have performance implications, as regular expression matching is slower than simple class-based matching. In many cases, the attribute selectors aren't providing enough value over simply adding an additional class to the element in question. There are several types of attribute selectors to be mindful of.
The first attribute selector is actually not a performance issue as it simply determines if the attribute is
present. For example, the following applies only when an href property is specified on an
<a> element:
a[href] {
color: red;
}
This attribute selector is okay to use and shouldn't cause any performance issues.
The second attribute selector that is okay to use applies the style only when an attribute value matches exactly.
For example, the following applies only when the rel attribute of an <a> element
is "external":
a[rel=external] {
color: blue;
}
After these two, the rest of the attribute selectors cause performance issues. Each of the selectors has the same basic format, using square braces after an element name and a special character preceding the equals sign to perform a type of regular expression.