CSS Attribute Selectors

Attribute selectors set styles for HTML elements with specified attributes. You can style HTML elements that have specified attributes, not limited to class and id attributes.

Understanding attribute selectors

CSS attribute selectors provide a simple and powerful method to set styles for HTML elements with specificAttribute or attribute valuepresence will apply the style to the HTML element.

You can create an attribute selector by placing the attribute (optionally with a value) inside a pair of square brackets. You can also place aElement type selector.

The following sections describe the most common attribute selectors.

CSS [attribute] selector

This is the simplest form of the attribute selector, and the style rule is applied to the element if the given attribute exists. For example, we can use the following style rule to style all elements with attributes:

[title] {}}
　　　　color: blue;
}

[title] The selector in the example matches all elements with the title attribute.

You can also limit the scope of the selector by placing the attribute selector after the element type selector, as shown below:

abbr[title] {
　　　　color: red;
}

The selector abbr[title] only matcheselements with the title attribute, so it matches abbreviations but does not match those with the attributeanchorelements with the title attribute.

CSS [attribute="value"] selector

You can use the = operator to make the attribute selector match any element whose attribute value is exactly equal to the given value:

input[type="submit"] {
　　　　border:　1px solid green;
}

The selector in the example matches input All elements with a type attribute value equal to submit.

CSS [attribute〜="value"] selector

You can use the ~= operator to make the attribute selector match an attribute value that is composed ofspace-separatedAny element in the list of values (e.g., class="alert warning") matches, one of which is equal to the specified value:

[class~="warning"] {
　　　　color: #fff;
　　　　background: red;
}

The selector matches any HTML element with a class attribute that contains space-separated values, one of which is warning. For example, elements with class values that match warning, alert warning, etc.

CSS [attribute |="value"] selector

You can use the |= operator to make the attribute selector match an attribute that has a value starting with the specified valuehyphen-separatedAny element in the value list matches:

[lang|=en] {
　　　　color: #fff;
　　　　background: blue;
}

The selector in the example matches those withlangAll elements with an attribute that contains a value starting with en, regardless of whether the value is followed by a hyphen and more characters. In other words, its elements match those with the lang attribute having the value en, en-US, en-GB, etc., and cannot be US-en, GB-en.

CSS [attribute ^="value"] selector

You can use the ^= operator to make the attribute selector match an attribute valueSimilarly, you can use the $= operator to select attribute valueswithstarting withAny element matches. It does not have to be a complete word.

a[href^="http://"] {
　　　　background: url("external.png")　100%　5background: url("pdf.png") 0-0% no
　　　　repeat;-right:　15px;
}

The selector in the example locates all external links and adds a small icon indicating that they will open in a new tab or window.

CSS [attribute $="value"]选择器

CSS [attribute $="value"] selectorSimilarly, you can use the $= operator to select attribute valueswithspecified valueending with

All elements. It does not have to be a complete word.
　　　　a[href$=".pdf"] {　5background: url("pdf.png") 0-0% no
　　　　repeat;-padding　20px;
}

left:In the example above, the selector selects

Linking all elements to PDF documents and adding a small PDF icon to provide users with tips about the link. *CSS [attribute

="value"] selector*You can use

=operator makes attribute selectors match all elements whose attribute values contain the specified value.*[class
　　　　color: #fff;
　　　　background: red;
}

In the example above, this selector matches all HTML elements with class value containing the attribute warning. For example, its elements match those with class value warning, alert warning, alert-warning or alert_warning, etc.

Styling forms with attribute selectors

Attribute selectors for nonclassor the style style is particularly usefulid:

input[type="text"], input[type="password"] {
　　　　width:　150px;
　　　　display: block;
　　　　margin-bottom:　10px;
　　　　background: yellow;
}
input[type="submit"] {
　　　　padding:　2px　10px;
　　　　border:　1px solid #804040;
　　　　background: #ff8040;
}