CSS attribute selectors offer a simple and effective method to style HTML elements based on the presence of specific attributes or attribute values.
You can create an attribute selector by enclosing the attribute—optionally with a value—within square brackets. It's also possible to add an element type selector before it.
Below are descriptions of the most common attribute selectors.
This is the most basic form of an attribute selector, applying style rules to an element if a given attribute exists. For instance, all elements with a title attribute can be styled using the following rules:
[title] {
color: blue;
}The selector [title] in the above example targets all elements with a title attribute.
You can refine this selection to a specific HTML element by placing the attribute selector after an element type selector, like this:
abbr[title] {
color: red;
}The selector abbr[title] only matches <abbr> elements with a title attribute, thus targeting abbreviations but not anchor elements with a title attribute.
The = operator allows an attribute selector to match elements whose attribute value is exactly equal to a specified value:
input[type="submit"] {
border: 1px solid green;
}In the above example, the selector matches all <input> elements with a type attribute value equal to submit.
The ~= operator enables an attribute selector to match elements with an attribute value consisting of a list of space-separated values (e.g., class="alert warning"), one of which exactly matches the given value:
[class~="warning"] {
color: #fff;
background: red;
}This selector targets any HTML element that possesses a class attribute with multiple values separated by spaces, among which one of them is warning. For example, it matches elements with class values like warning, alert warning, etc.
The |= operator allows an attribute selector to match elements whose attribute contains a hyphen-separated list of values beginning with the specified value:
[lang|=en] {
color: #fff;
background: blue;
}In the above example, the selector matches all elements with a lang attribute containing a value starting with en, regardless of whether that value is followed by a hyphen and additional characters. Essentially, it matches elements with lang attributes having values like en, en-US, en-GB, etc., but not US-en, GB-en.
The ^= operator allows you to create an attribute selector that matches any element whose attribute value begins with a specific value. It doesn't need to be an entire word.
a[href^="http://"] {
background: url("external.png") 100% 50% no-repeat;
padding-right: 15px;
}In the example above, the selector targets all external links, adding a small icon to indicate they will open in a new tab or window.
Likewise, the $= operator can be used to create a selector that matches elements whose attribute value ends with a specified value. It doesn't need to be an entire word.
a[href$=".pdf"] {
background: url("pdf.png") 0 50% no-repeat;
padding-left: 20px;
}In the example above, the selector matches all <a> elements that link to a PDF document, adding a small PDF icon to signal the link type to the user.
The *= operator allows you to create an attribute selector that matches elements whose attribute value contains a specified value.
[class*="warning"] {
color: #fff;
background: red;
}In the example above, the selector matches all HTML elements with a class attribute that contains the word warning. It will match class values like warning, alert warning, alert-warning, or alert_warning.
Attribute selectors are very helpful for styling forms without using class or id attributes:
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;
}