The CSS attribute selectors provides an easy and powerful way to apply the styles on HTML elements based on the presence of a particular attribute or attribute value.
You can create an attribute selector by putting the attribute—optionally with a value—in a pair of square brackets. You can also place an element type selector before it.
The following sections describe the most common attribute selectors.
This is the simplest form of an attribute selector that applies the style rules to an element if a given attribute exists. For example, we can style all the elements that have a title attribute by using the following style rules:
The selector [title] in the above example matches all elements that has a title attribute.
You can also restrict this selection to a particular HTML element by placing the attribute selector after an element type selector, like this:
The selector abbr[title] matches only < abbr> elements that has a title attribute, so it matches the abbreviation, but not the anchor elements having title attribute.
You can use the = operator to make an attribute selector matches any element whose attribute value is exactly equal to the given value:
The selector in the above example matches all < input> element that has a type attribute with a value equal to submit.
You can use the ~= operator to make an attribute selector matches any element whose attribute value is a list of space-separated values (like class="alert warning") , one of which is exactly equal to the specified value:
This selector matches any HTML element with a class attribute that contains space-separated values, one of which is warning. For example, it matches the elements having the class values warning, alert warning etc.
You can use the |= operator to make an attribute selector matches any element whose attribute has a hyphen-separated list of values beginning with the specified value
The selector in the above example matches all elements that has an lang attribute containing a value start with en, whether or not that value is followed by a hyphen and more characters. In other words, it matches the elements with lang attribute that has the values en, en-US, en-GB, and so on but not US-en, GB-en.
You can use the ^= operator to make an attribute selector matches any element whose attribute value starts with a specified value. It does not have to be a whole word.
The selector in the example above will target all external links and add a small icon indicating that they will open in a new tab or window.
Similarly, you can use the $= operator to select all elements whose attribute value ends with a specified value. It does not have to be a whole word.
The selector in the example above select all < a> elements that links to a PDF document and add a small PDF icon to provide hints to the user about the link.
You can use the *= operator to make an attribute selector matches all elements whose attribute value contains a specified value.
This selector in the example above matches all HTML elements with a class attribute that values contains warning. For example, it matches the elements having class values warning, alert warning, alert-warning or alert_warning etc.
The attribute selectors are particularly useful for styling forms without class or id: