The CSS Attribute Selector has used to select the HTML elements that have a specific attribute or attribute with a specified value.
It is a good way to style the HTML elements by grouping them based on some specific attributes and the attribute selector will select those elements with similar attributes.
Following are the various attribute selectors:
[attribute] Selector
This type of attribute selector is used to select all the elements that have the specified attribute and apply the CSS property to that attribute.
For example, the selector [title] will select all the elements with the style attribute.
[attribute = “value”] Selector
This selector is used to select all the elements whose attribute has the value exactly the same as the specified value.
[attribute~=”value”] Selector
This selector is used to select all the elements whose attribute value is a list of space-separated values, one of which is exactly equal to the specified value.
[attribute|=”value”] Selector
This selector is used to select all the elements whose attribute has a hyphen-separated list of values beginning with the specified value. The value has to be a whole word either alone or followed by a hyphen.
[attribute^=”value”] Selector
This ^= operator is used to make an attribute selector matches any element whose attribute value starts with a specified value. The value doesn’t need to be a whole word.
[attribute$=”value”] Selector
This $= operator is used to select all elements whose attribute value ends with a specified value. The value doesn’t need to be a whole word.
[attribute*=”value”] Selector
This *= operator is used to make an attribute selector matches all elements whose attribute value contains a specified value anywhere. The value doesn’t need to be a whole word.
Styling Forms with Attribute Selectors
The attribute selectors are useful for styling forms without class or id.