Attribute selectors are used to style elements that have a particular attribute or values. That means it target the element based on attribute or values. The use of css attribute selectors is fairly limited because they have been supported only in the latest versions of browsers. Following are some of commonly used attribute selectors and sample codes.
Presence of an attribute
This one check whether the attribute is specified in the element, doesn`t matter what the value given to the attribute is:
In the above css code any < p > element with attribute "class" to change the color to #FF0066.
In the above css code the attribute selector find attribute name "class" exist in p element and if exist it change the font size.
The value of an attribute
You can style the elements with its attribute values.
In the above code the style changes according to its attribute value. If any href attribute with its value "http://www.corelangs.com/default.html" will change the font size.
Style based on Partial Attribute Values
Taking the advantage of attribute selectors , you can style an element by based on whether a particular word contain anywhere inside attribute value, appears at the beginning of an attribute`s value, at the end of an attribute`s value or contains as a substring in the attribute value.
If any attribute that have a space separated list of words , you can style that element based on the presence of any one of those words.
You can style an element by select its substring from its attribute vale.
Check the attribute value is start with given word.
Check the attribute value is end with given word.
In the above image, you can see Red and Blue are in Italics style because these two classes end with the word "class".