Older Attribute Selectors
E[attr]
Element E that has the attribute attr with any value.
img[alt] {}
<img src="image.jpg" alt="accessible" title="accessible">
form[type] {}
<input type="date">
E[attr=”val”]
Element E that has the attribute attr with the exact, case-sensitive if attribute is case sensitive, value val.
img[src="small.gif"] {}
<img src="small.gif" alt="small">
input[type="text"] {}
<input name="firstname" type="text">
E[attr|=val]
Element E whose attribute attr has a value val or begins with val- (“val” plus “-“).
p[lang|="en"] {}
<p lang="en-uk">This paragraph is set to en-uk</p>
img[title|="small"] {}
<img src="small.gif" title="small-thumbnail">
E[attr~=val]
Element E whose attribute attr has within its value the space-separated full word val.
a[title~=more] {}
<a href="#" title="want more info about this?">more ></a>
CSS3 Attribute Selectors
E[attr^=val]
Element E whose attribute attr starts with the value val.
a[href^=mailto] {background-image:url(emailicon.gif);}
<a href="mailto:example@example">example@example.com</a>
E[attr$=val]
Element E whose attribute attr ends in val.
a[href$=pdf] {background-image:url('pdficon.gif');}
<a href="flyer.pdf">Information Flyer</a>
E[attr*=val]
Element E whose attribute attr matches val anywhere within the attribute. Similar to E[attr~=val] above, except the val can be part of a word.
NOTE: You can use multiple attributes!! e.g. a[title][href] {}