In modern web applications, where a lot of the elements are generated dynamically, often, it's not enough to know the element ID or class attribute to build a unique selector. There may be cases wherein an element has the same class, name, or even ID, but they are differentiated by having different values in the attributes.

The syntax of a CSS selector that uses attributes is, in general, very simple, consisting of three basic elements: the element type, the attribute, and the value of the attribute (for example, element[attribute='value']).

It is also possible to combine attributes to create a unique and more robust CSS selector. This is helpful when only the union of two or more attributes can help us to differentiate the element from other elements.

A combined CSS selector looks as follows:

element[attribute1='value1'][attribute2='value2']

Partial matches are an additional alternative, when an exact match to the attribute value is not possible. With web applications that generate a different ID each time the page is requested, this happens very often. Three types of matching can be used, as follows:

»» element[attribute^='value'] attribute must start with 'value'
»» element[attribute$='value'] attribute must end with 'value'
»» element[attribute*='value'] attribute must contain 'value'