Attribute Selectors
HTMLElements can selected using the attributes. Several ways of attribute matching is explained below
tag[ attribute ] - (has attribute)
Fetch HTML elements those have a particular attribute irrespective of the values.
Example
This example selects the first and second div, not the third one.
JS HTML
						// get div elements those have class attribute
						$.get("div[class]");
						
<div class="top"></div>

<div class></div>

<div></div>
tag[ attribute = 'value' ] - (exactly equal to)
Fetch HTML elements those have an attribute with a value exactly equal to the provided value.
Example
This example selects the first div, and not the second and third one.
JS HTML
						// get div elements those have class attribute exactly equal to "top" value
						$.get("div[class='top']");
						
<div class="top"></div>

<div class></div>

<div></div>
tag[ attribute ~= 'value' ] - (value in space separated list)
If the attribute has 'space' separated list of values, then '~=' can be used to match with any one of those values. In simple, HTML elements will be fetched if any of the value in 'space' separated list matches with provided value
Example
This example selects the first and third divs. First div is selected as it has "main" class in space separated list.
JS HTML
						// get div elements those have class attribute exactly equal to "top" value
						$.get("div[class~='main']");
						
<div class="top main border"></div>

<div class></div>

<div class="main"></div>
tag[ attribute |= 'value' ] - (value in hyphen separated list)
This selector is similar to the above one except this selector deals with hyphen separated list. If the attribute has 'hyphen' separated list of values, then '|=' can be used to match with any one of the values.
Example
This example selects first, second and fourth span. These span tags have 'user' in their IDs separated by hyphen.
JS HTML
						// get span elements which have 'user' in ID's 
						$.get("span[id|='user']");
						
<span id="red-correct-user'"></span>

<span id="green-user"></span>

<span id="blue"></span>

<span id="user"></span>
tag[ attribute *= 'value' ] - (somewhere in the value)
This selector will pick those elements which have attribute value contains the provided text.
Example
This example selects first and second span tags. These span tags ID's have the text 'user' somewhere in entire value. 'userinfo' and 'nouserinfo' both have 'user' text.
JS HTML
						// get span elements which have 'user' in ID's 
						$.get("span[id*='user']");
						
<span id="userinfo'"></span>

<span id="nouserinfo"></span>

<span id="use"></span>
tag[ attribute ^= 'value' ] - (value starts with)
This selector will match all elements whose attribute value starts with the provided value.
Example
This example selects first and second span. These span tags IDs start with 'contact' text.
JS HTML
						// get span elements which have 'user' in ID's 
						$.get("span[id^='contact']");
						
<span id="contactnumber'"></span>

<span id="contactemail"></span>

<span id="usercontact"></span>
tag[ attribute $= 'value' ] - (value ends with)
This selector will match all elements whose attribute value ends with the provided value.
Example
This example selects first and third span. These span tags IDs end with 'number' text.
JS HTML
						// get span elements which have 'user' in ID's 
						$.get("span[id$='number']");
						
<span id="housenumber"></span>

<span ></span>

<span id="mobilenumber"></span>

<span id="emailaddress"></span>
tag[ attribute1 = 'value1' ][attribute2 = 'value2'] - (multiple attribute selection)
Attribute selectors can be combined to match multiple attributes of elements. Elements will be selected if given attributes satisfy the given conditions.
Example
This example selects the third span. It looks for span tags which have both class and id attributes. class value must be exactly equal to 'red' and id value should end with 'number'
JS HTML
						// get span elements which have 'user' in ID's 
						$.get("span[id$='number'][class='red']");
						
<span id="housenumber" class="red"></span>

<span ></span>

<span id="mobilenumber" class="green"></span>

<span id="phonenumber"></span>