CSS Tutorial – 06 – Attribute Selectors

With the attribute selectors style can be added to elements based on their attributes. Elements can be matched either by their attribute alone, by attribute and value, by attribute with a value in a space separated list, or by attribute with a value in the beginning of a hyphen separated list.

Attribute value selector

This first selector will match only the input elements that use the type attribute.

input[type] {}

Attribute and value selector

The second selector will match by both attribute and value. The example below will select input elements that have their type attribute set to submit.

input[type="submit"] {}

Attribute value substring selector

The third selector will apply to elements whose attribute’s value contains a specific string separated by spaces.

input[value~="Example"] {}

For example, the rule above will apply to the following element.

<input type="text" value="Example text" />

Attribute language value selector

The last attribute selector is mainly used to match the language attribute.

[lang|="en"] {}

The example above selects the elements whose lang attribute’s value has a hyphen-separated list of values beginning with “en”, as with “en-US”.

<p lang="en-US">In America</p>

Recommended reading:
Sams - Teach Yourself HTML and CSS in 24 Hours

PVT book:
Handbook of C++ Syntax