JavaScript Tutorial

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:-


Go back to Previous Course