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] {}