CSS contains unqualified attributes

This means that the URL in question is a CSS file that contains one or more unqualified attribute selectors.

Why is this important?

Unqualified attribute selectors, such as [type=text], match all elements first and then check their attributes. This means they have the same performance characteristics as the universal selector (*). Similar to the universal selector, unqualified attribute selectors cause performance issues when used as the key part (far-right) of a selector.

Browsers evaluate selectors from right-to-left, so this rule begins by first matching every element in the document. After that, each of those elements must be inspected to see if it matches the next criteria, and so on. The more complex the selector containing unqualified attributes, the slower the evaluation becomes.

What does the Hint check?

This Hint will trigger for any internal or external CSS URL which contains an unqualified attribute selector as the key part of a selector.

Examples that trigger this Hint:

The Hint would trigger for any style sheet that contains an unqualified attribute selector as the key part (furthest right):

[type=text] {
 color: red;
}

.selected [type=text] {
 color: red;
}

How do you resolve this issue?

It is recommended to avoid using unqualified attribute selectors as the key part of a selector - using an unqualified attribute selector when it is not key does not introduce such performance issues.

Further Reading

• Writing efficient CSS selectors