Css--property Selector

<span id="Label3"></p><p><p>Reference: https://www.codementor.io/css/tutorial/how-to-use-css-selectors</p></p><p><p></p></p><p><p><span style="background-color: #ffcc00;">Attribute Selectors</span></p></p><p><p><span style="background-color: #ffffff;">1. <span style="color: #ff0000;">[attr]</span></span></p></p><p><p>eg:input[type] + All input tags that have the Type property set are in effect (regardless of the value of Type)</p></p><p><p></p></p><p><p>2. <span style="color: #ff0000;">[attr= "value"]</span></p></p><p><p>Eg:input[type= "text"]</p></p><p><p></p></p><p><p>3.<span style="color: #ff0000;">Substring Matching Attribute selectors</span></p></p><p><p>>> <span style="color: #ff0000;">^</span> Begin with Selector</p></p><p><p>a[href^= "/http"]</p></p><p><p>>> <span style="color: #ff0000;">$</span> End with Selector</p></p><p><p>a[href$= ". pdf"]</p></p><p><p>>> <span style="color: #ff0000;">*</span> Contains Selector</p></p><p><p>a[href*= "goo"] contains, Case insensitive</p></p><p><p></p></p><p><p>4. <span style="color: #ff0000;">[attr~=value]</span></p></p><p><p>eg</p></p><p><p>class= "title"</p></p><p><p>class= "title colorme"</p></p><p><p>>> General [class= "title"] exact match, 1th entry into force</p></p><p><p>>> ~ [class~= ' title '] substring match, 1, 2 are in effect</p></p><p><p>>> General [class= "colorme"] exact match, no effect</p></p><p><p>>> ~ [class~= "colorme"] substring match, 2nd takes effect</p></p><p><p>>> General [class= "title colorme"] exact match, 2nd entry into force</p></p><p><p>>> General [class= "colorme title"] exact match, no effect</p></p><p><p></p></p><p><p>5.<span style="color: #ff0000;"> [attr|=value]</span></p></p><p><p>eg</p></p><p><p>lang= "en"</p></p><p><p>lang= "en-es"</p></p><p><p>lang= "es"</p></p><p><p>>> Selecting [lang|=en]: [lang|=en] 1, 2 effective (|= for the connector can take Effect)</p></p><p><p>>> Selecting [lang|=e]: [lang|=e] does not take effect</p></p><p><p>>> Selecting [lang^=e]: [lang^=en] All in effect</p></p><p><p>>> [lang|=en],[lang|=es] are in effect</p></p><p><p>>> div[lang|=es] 2nd entry into force</p></p><p><p>Css--property Selector</p></p></span>