CSS Selector Part-II
CSS Selectors can be divide in 4 categories.
1. Simple selectors.
2. Attribute selectors.
3. Pseudo-classes and pseudo-elements.
4. Combinators.
In this article I'll discuss about Attribute selectors only and remaining categories in next article.
Attribute selectors
We can style specific HTML element by specific attribute or attribute value using Attribute selectors
[attribute] Selector
This type of attribute selector is used to select all the elements that have the specified attribute and will apply CSS property to that element.
As the above example selector will select all li who have class attribute.
[attribute="value"] Selector
This type of attribute selector is used to select all the elements that have the specified attribute with specific value and will apply CSS property to that element.
As the above example selector will select all li who have class attribute with value ab.
[attribute~="value"] Selector
This type of attribute selector is used to select all the elements with an attribute value containing specific word and will apply CSS property to that element.
As the above example selector will select all element who have class attribute containing word a.
[attribute|="value"] Selector
This type of attribute selector selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-) and will apply CSS property to that element.
As the above example selector will select all element who have class attribute containing word abc or abc-.
[attribute^="value"] Selector
This type of attribute selector selector is used to select elements with the specified attribute, whose value start with specified word and will apply CSS property to that element.
As the above example selector will select all element who have class attribute whose value is starting with ab.
[attribute$="value"] Selector
This type of attribute selector selector is used to select elements with the specified attribute, whose value end with specified word and will apply CSS property to that element.
As the above example selector will select all element who have class attribute whose value is ending with ab.
[attribute*="value"] Selector
This type of attribute selector selector is used to select elements whose attribute value contains specified word.As the above example selector will select all element whose attribute value contains ab.