Attribute Selector in CSS

 

Attribute Selector

 

The CSS Attribute Selector is used to select an element with some specific

 attribute or attribute value. It is an excellent 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.

 

CSS Code

 

Output

 

 

Types of Attribute Selector

[Attribute = “value”] Selector 

 

This selector is used to select all the elements whose attribute has the value

exactly the same as the specified value. 

 

CSS Code

 

Output

 

 

[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. 

 

CSS Code

 

 

Output

 

 

[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. 

 

CSS Code

 

Output

 

 

[attribute^=”value”] Selector

This selector is used to select all the elements whose attribute value begins

 with the specified value. The value doesn’t need to be a whole word. 

 

CSS Code

 

 

Output

 

[attribute$=”value”] Selector

This selector is used to select all the elements whose attribute value ends with the specified value. The value doesn’t need to be a whole word. 

 

CSS Code

 

 

Output

 

[attribute*=”value”] Selector

 

 This selector selects all the elements whose attribute value contains the specified value present anywhere. The value doesn’t need to be a whole word. 

 

CSS Code

 

 

Output