CSS3: From Knowledgable to Ninja – Part 1 Selectors, Attribute Selectors

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