New CSS3 Attribute Value Selectors

CSS3 level selectors has made it way too easy to select attributes of your HTML elements with no use of JavaScript. Let’s have a quick look at some CSS3 attribute selectors.

Begins-with Attribute Value Selector
As the name ‘Begins-with’ explains, it does the same. This attribute value selector lets you select a specified attribute which begins with specified value. This selector will match to all elements with equal values.

Example:

 p[class^="heading"]{ font-weight:bold; }

It will match to all p tags which are using heading class in the beginning. In the above syntax, you may replace class with any attribute and value as well.

Ends-with Attribute Value Selector
Ends with attribute value selector does the opposite of Begins-with attribute value selector, it searches for the specific attribute and that ends with the specified value.

Example:

 a[href$=".pdf"]:after{ content: url(img/pdf-icon.jpg); } 

In the above example, it selects the all links with .pdf extension and adds a pdf icon at end of the link as I am using the :after pseudo element.

Substring-match Attribute Value Selector
This attribute value selector matches attribute which have occurrences of the value specified, it doesn’t matter that specified value begins with or ends with it just finds the occurrences of the specified value.

Example:

 p[class*="heading"]{ font-weight:bold; } 

With the syntax above, it will select all p tags which contains the occurrences of the specified value.

Namespace Attribute Selector
Namespace attribute selector allows distinct XML namespaces to be selected for attributes and their values in selectors.

 [hello|world="value"]{ color:green; } 

Above syntax will select all world attributes in the hello namespace having a value of value.

All these attributes values selector reduces a lot of work with no use of JavaScript. Now it all depends on which aspect do you use it. There are already a bunch of websites using these attribute value selector to bring the flexibility and reduce the workload. For example, twitter bootstrap icons uses the begins with and substring-match attribute value selector for displaying the different icons and using the same properties for similar elements.