CSS3 for Mobile - Learn HTML5 and JavaScript for Android - page 131

Table 5-3. Attribute Selectors

Selector Description

element[attribute="value"] This will match all elements with attributes that exactly
match the specified value.

element[attribute*="value"] This will match and apply a style to all attributes that
contain the specified value. * acts as a wildcard attribute
selector.

element[attribute^="value"] This will match and apply a style to all attributes that begin
with the specified value. ^ acts as a starting indicator for
the selector.

element[attribute$="value"] This will match and apply a style to all elements with
attributes that end with the specified value. $ acts as an
end flag for the element's attribute value.

You can change the attribute and value to match any element. For instance, to
select all text fields in a form you would use the following CSS.
input[type="text"] {
border: 1px solid #000000;
}
This will create a one-pixel border around all text elements.

You can also select all elements that are checked, enabled, or disabled using
the pseudoselectors given in Table 5-4.

Table 5-4. Pseudoselectors

Selector Description

:enabled

Selects all form elements that are enabled

:disabled

Selects all form elements that are disabled

:checked

Selects all form elements that are checked

You can combine and and chain CSS selectors. For instance, if you wanted to
select all text form fields that were disabled, you could use the following CSS.
input[type="text"]:disabled {
opacity: 0.5;
}