Attribute selectors allow style to be added to elements based on their attributes and attribute values.
Attribute Selector
Elements that use a specific attribute can be matched using the attribute selector. This selector does not take the value of the attribute into account.
input[type] {}
This selector will match only input elements that use the type attribute, such as the following element:
<input type="text">
Attribute Value Selector
Both attribute and value can be matched using the attribute value selector.
input[type="submit"] {}
Input elements that have their type attribute set to submit will be matched by this rule, as in the following example:
<input type="submit">
Language Attribute Selector
The language attribute selector is used to match the lang attribute
.
p[lang|="en"] {}
This selector will match any elements whose lang attribute value begins with “en”, such as “en-US”. Note that language codes such as these are case insensitive.
<p lang="en">English</p>
<p lang="en-US">American English</p>
Delimited Value Selector
The [attribute~=value] selector
will apply to elements whose attribute value contains the given word among a space-separated list of words.
input[value~="word"] {}
This rule will select both of the following elements. The word needs to be an exact case-sensitive match, so the selector will not apply to, for instance, “Word” or “words”.
<input type="text" value="word">
<input type="text" value="word word2">
Value Substring Selector
The [attribute*=value] selector
matches elements whose attribute value contains the specified substring.
p[title*="para"] {}
Paragraph elements with a title containing “para” will be matched by this rule.
<p title="my paragraph"></p>
Value Start Selector
The [attribute^=value] selector
matches every element whose attribute value begins with the specified string.
p[title^="first"] {}
Paragraphs with a title value starting with “first” will have this rule applied.
<p title="first paragraph"></p>
Value End Selector
The [attribute$=value] selector
matches an element if its attribute value ends with the specified string.
p[title$="1"] {}
In the following markup, the value of the title attribute ends with “1” and will therefore be matched by this rule.
<p title="paragraph 1"></p>