CSS Attribute Selectors
Through CSS attribute selectors, we can apply styles based on the presence of a particular attribute or its value.
Square brackets are used after the element name in CSS to indicate that we are targeting attributes.
CSS [attribute] Selector
This selector will be targeted to every element which has this attribute.
Input:-
Output:-
CSS [attribute="value"] Selector
We can use the "=" operator to select elements whose attribute value is exactly equal to the specified value.
Input:-
Output:-
CSS [attribute~="value"] Selector
We can use the ~= operator to make an attribute selector matches any element whose attribute value is a list of space-separated values, one of which is exactly equal to the specified value.
Input:-
Output:-
CSS [attribute|="value"] Selector
We can use the "|=" operator to select elements whose attribute has a hyphen-separated list of values beginning with the specified value.
Input:-
Output:-
CSS [attribute^="value"] Selector
We can use the "^=" operator to select elements whose attribute value starts with the specified value. It doesn't have to be an exact match.
Input:-
Output:-
CSS [attribute$="value"] Selector
We can use the "$=" operator to select elements whose attribute value ends with the specified value. It doesn't have to be an exact match.
Input:-
Output:-
CSS [attribute*="value"] Selector
We can use the *= operator to make an attribute selector matches all elements whose attribute value contains a specified value.
For eg – when I pass click as a value in * attribute, it will target click, click me, click-me. Every value with hypen or with space.
Input:-
Output:-