Exact or Loose Match

When building selectors, you can choose whether an attribute value should match exactly or only partially.

Instead of = to define the value of the attribute, you can use *=. The sign = means exact match and *= means loose match.

In the example of the Wikipedia's search button (Basic Concepts of Selectors), we created a selector that has an exact match. For reminder, this was the selector we've built:

button[class='pure-button pure-button-primary-progressive'][type='submit']

But if you use a loose match, the selector can look like this:

button[class*='pure-button'][type='submit']

Note how exact value of pure-button pure-button-primary-progressive was shortened to the loosely matching value pure-button.

Video Tutorial: Exact versus Loose Match

Example: Exact versus Loose Match